react-uzprogers-textstyle

Reusable text style components for React projects, with built-in support for Tailwind and design tokens.

✨ Features

• Predefined text styles (Display, Heading, Body, Button, Caption)
• Responsive support for mobile / tablet / web
• Variant support: default, info, danger, success, etc.
• Customizable via token + optional as prop (h1, p, etc.)

🚀 Installation

npm i react-uzprogers-textstyle
# or
yarn add react-uzprogers-textstyle

🧱 Usage

import TextStyle from "react-uzprogers-textstyle";

export default function Example() {
  return (
    <TextStyle.Display token="large" variant="info" as="h1">
      Welcome to My Site
    </TextStyle.Display>
  );
}

📘 Available Types and Tokens

<TextStyle.Display token="large" />
<TextStyle.Heading token="medium" />
<TextStyle.Body token="small" />
<TextStyle.Button token="medium" />
<TextStyle.Caption token="medium" />

🎨 Variant options

• default – black text (default)
• info – blue
• success – green
• warning – yellow
• danger – red

🛠 Props

| Prop | Type | Description | | ----------- | ---------------------- | ---------------------------------------- | | token | string | Style token (e.g. "large", "medium") | | variant | "default" | ... | Optional color variant | | as | "h1" | "p" | ... | Optional HTML tag (defaults to span) | | className | string | Optional additional Tailwind classes |

📚 styleMap — Responsive Typography Utility

The styleMap object provides a consistent typography system for your project, with responsive styles for text elements (display, headings, body, buttons, captions) across mobile, tablet, and web breakpoints.

It uses Tailwind CSS utility classes and can be used to ensure your design scales properly on all devices.

✨ Structure

export const styleMap = {
  display: {
    large: { mobile, tablet, web },
    medium: { mobile, tablet, web },
  },
  heading: {
    large: { mobile, tablet, web },
    medium: { mobile, tablet, web },
    small: { mobile, tablet, web },
  },
  body: {
    large: { mobile, tablet, web },
    medium: { mobile, tablet, web },
    small: { mobile, tablet, web },
  },
  button: {
    medium: { mobile, tablet, web },
    small: { mobile, tablet, web },
  },
  caption: {
    medium: { mobile, tablet, web },
  },
} as const;

🌐 Global Theming with TextStyleProvider (Recommended)

For real-world apps, the recommended pattern is to wrap your app with a TextStyleProvider, so you can easily inject a custom styleMap (themes, branding) across the entire project.

1️⃣ Setup Provider in App

// App.tsx or Layout.tsx
import { TextStyleProvider } from "@/components/TextStyleProvider";
import myCustomStyleMap from "@/styles/myCustomTextStyleMap";

function App() {
  return (
    <TextStyleProvider styleMap={myCustomStyleMap}>
      <YourApp />
    </TextStyleProvider>
  );
}


## 📄 License

MIT

Made with ❤️ by UzProgers