A beautiful, Leva-inspired font controls library for React
npm install font-controlsbash
npm install font-controls
`
Quick Start
`tsx
import { FontControls, useFontControls } from "font-controls";
import "font-controls/dist/style.css";
function App() {
const { config, setConfig } = useFontControls();
return (
Your styled text here
Typography controls made easy!
);
}
`
That's it! Google Fonts are loaded automatically.
Complete Example
Here's a full example with live preview:
`tsx
import { FontControls, useFontControls } from "font-controls";
import "font-controls/dist/style.css";
function App() {
const { config, setConfig } = useFontControls();
return (
Font Controls Demo
{/ Preview area with live font changes /}
style={{
...config,
padding: "40px",
border: "1px solid #eee",
borderRadius: "8px",
}}
>
The Quick Brown Fox Jumps Over The Lazy Dog
Typography is the art and technique of arranging type to make
written language legible, readable and appealing when displayed.
{/ Current config display /}
style={{
background: "#f5f5f5",
padding: "20px",
borderRadius: "6px",
marginTop: "20px",
}}
>
{JSON.stringify(config, null, 2)}
{/ Font Controls Panel /}
API Reference
$3
The easiest way to use font controls:
`tsx
const { config, setConfig, updateConfig, resetConfig } =
useFontControls(initialConfig);
`
Returns:
- config - Current font configuration object
- setConfig - Set entire config at once
- updateConfig - Update a single property
- resetConfig - Reset to defaults
$3
| Prop | Type | Default | Description |
| -------------- | ------------------------------ | -------------------------- | ------------------------------- |
| value | Partial | - | Current font configuration |
| onChange | (config: FontConfig) => void | - | Called when config changes |
| fontFamilies | string[] | ['Inter', 'Roboto', ...] | Custom font list (100 defaults) |
| minFontSize | number | 8 | Minimum font size |
| maxFontSize | number | 120 | Maximum font size |
| fontSizeStep | number | 1 | Font size increment |
$3
`typescript
interface FontConfig {
fontFamily: string;
fontSize: number;
fontWeight: number;
lineHeight: number;
letterSpacing: number;
textTransform: "none" | "uppercase" | "lowercase" | "capitalize";
color: string;
textAlign: "left" | "center" | "right" | "justify";
}
`
Advanced Usage
$3
`tsx
onChange={setConfig}
fontFamilies={["Inter", "Roboto", "Playfair Display", "Fira Code"]}
/>
`
$3
`tsx
import { useState } from "react";
import { FontControls } from "font-controls";
function App() {
const [config, setConfig] = useState({});
return
}
`
$3
`tsx
const { config, updateConfig } = useFontControls();
// Update just the font size
updateConfig("fontSize", 24);
// Update just the color
updateConfig("color", "#ff0000");
`
Styling
The library uses CSS variables for theming:
`css
:root {
--fc-bg: hsl(0, 0%, 100%); / Panel background /
--fc-text: hsl(0, 0%, 3.9%); / Text color /
--fc-border: hsl(0, 0%, 89.8%); / Border color /
--fc-accent: hsl(0, 0%, 9%); / Accent color /
}
`
$3
✅ No conflicts - All styles are scoped to .font-controls-panel`