React components and hooks for textnode typography system. Text, Heading components with variants, font loading hooks, and zero CLS.
npm install @textnode/react> React components and hooks for the textnode typography system
Part of the textnode typography system.
- Text & Heading Components - Polymorphic components with variant support
- Typography Provider - Context-based configuration
- Font Loading Hooks - Track font loading state
- Zero CLS - Automatic fallback font matching
- TypeScript First - Full type safety
``bash`
npm install @textnode/core @textnode/react
`tsx
import { TypographyProvider, Text, Heading } from '@textnode/react';
const config = {
fonts: {
heading: {
name: 'Inter',
files: { 700: '/fonts/inter-700.woff2' },
fallback: { font: 'Arial' },
},
body: {
name: 'Source Sans Pro',
files: { 400: '/fonts/source-sans-400.woff2' },
fallback: { font: 'system-ui' },
},
},
scale: { type: 'modular', base: 16, ratio: 1.25 },
};
function App() {
return (
);
}
`
Semantic heading component (h1-h6) with variant support.
`tsx`
Versatile text component with polymorphic as prop.
`tsx`
`tsx
const { allLoaded, loadingFonts, failedFonts } = useFontLoadingState();
if (!allLoaded) return
`
`tsx`
const { scale, fonts, variants } = useTypography();
`tsx`
const bodyStyles = useVariant('body');
// { fontSize: '16px', lineHeight: 1.6, fontFamily: '...' }
| Prop | Type | Description |
|------|------|-------------|
| as | ElementType | Render as different element |variant
| | string | Pre-configured style variant |size
| | string \| number | Font size from scale or px |weight
| | number | Font weight |leading
| | number \| string | Line height |tracking
| | string | Letter spacing preset |truncate
| | boolean | Enable text truncation |lines
| | number | Max lines before truncation |balance
| | boolean` | Apply text-wrap: balance |
- @textnode/core - Core system
- @textnode/nextjs - Next.js integration
- @textnode/dev - Dev tools
MIT