Package Exports

@julioedi/montserrat-text
@julioedi/montserrat-text/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@julioedi/montserrat-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🖋️ Custom `Text` Component for React Native (Montserrat-Based)

This Text component wraps react-native's Text component to enforce consistent typography using the Montserrat font family. It offers a flexible system for applying font sizes, weights, and styles through props and predefined variants.

✨ Features

Uses Montserrat font family by default.
Supports font weights (100–900) via friendly names like "Bold", "Regular", etc.
Supports italic styles.
Customizable font variants (tiny, body, title, etc.).
Allows changing the base font family if needed.

📦 Installation

Install Montserrat font files in your project (e.g., through react-native-config, expo-font, or manual linking).

Recommended font naming convention:
```
Montserrat-100.ttf
Montserrat-100-italic.ttf
Montserrat-200.ttf
Montserrat-200-italic.ttf
...
Montserrat-900.ttf
Montserrat-900-italic.ttf
```

Register fonts in your app entry:

// Example with Expo
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';

const loadFonts = () => Font.loadAsync({
  'Montserrat-400': require('./assets/fonts/Montserrat-Regular.ttf'),
  'Montserrat-400-italic': require('./assets/fonts/Montserrat-Italic.ttf'),
  'Montserrat-700': require('./assets/fonts/Montserrat-Bold.ttf'),
  // Add more as needed...
});

// Use in App component

🧩 Usage

import Text from '@julioedi/montserrat-text';

export default function App() {
    return (
        <>
            <Text variant="title" weight="Bold">Title Text</Text>
            <Text variant="body">Body Text (Regular)</Text>
            <Text variant="small" italic>Small Italic Text</Text>
            <Text weight={600} style={{ color: 'blue' }}>Custom Weight</Text>
        </>
    );
}

🛠 Props

Prop	Type	Description
`variant`	`string`	Uses a predefined font size like `body`, `title`, etc.
`weight`	`fontWeightType` (`100`–`900` or `"Bold"` etc.)	Defines the font weight.
`italic`	`boolean`	Applies italic style.
`style`	`TextStyle` (without `fontFamily`)	Additional styles.
`children`	`ReactNode`	Text content.

🎨 Predefined Font Variants

These can be referenced via the variant prop:

Text.variants = {
    tiny: 10,
    small: 12,
    body: 14,
    medium: 16,
    large: 18,
    title: 22,
    heading: 26,
    display: 32,
}

➕ Add Custom Variants

Text.assignVariants({
    subtitle: 20,
    button: { fontSize: 16, letterSpacing: 1.2 },
});

🧬 Change Default Font Family

To use a font other than Montserrat:

Text.setFontName("YourFontName");

Then make sure your font files follow this pattern:

YourFontName-400.ttf
YourFontName-400-italic.ttf
YourFontName-700.ttf
...

📝 Notes

fontFamily and fontStyle should not be set manually via style.
All font styles should exist in your project under the naming scheme:
FontName-weight[-italic], e.g., Montserrat-400-italic.

🧪 Example with Custom Font and Variant

Text.setFontName("CustomSans");

Text.assignVariants({
  callout: { fontSize: 17, lineHeight: 22 },
});

<Text variant="callout" weight="Medium">Custom Callout Text</Text>

📄 License

MIT

@julioedi/montserrat-text