1.0.1-beta.0 • Published 4 years ago
font-tester v1.0.1-beta.0
A React Component Library for Testing Font Feature
Font Tester is a react component library for testing font feature. Can be use for preview font size, text-align, text-transform, and so on.
Installation
Use the package manager npm / yarn to install font-tester.
npm install font-tester
yarn add font-tester
Usage
// root application
// Typewriter is a React Context.Provider and must be call inside root/parrent element
import { Provider } from "font-tester";
const App = () => {
return (
<Provider
dText="Lorem ipsum dolor sit amet" // default value for text | *not required
dFsize={24} // default props for fontSize | *not required
>
<Children />
</Provider>
);
};
// children component
import { useFontTester } from "font-tester";
const Children = () => {
const { text, setText, fontSize, setFontSize } = useFontTester();
return (
<div>
<div>
// Slider for change fontSize value (number)
<input
id="input-fonsize"
min={12}
max={200}
step={1}
value={fontSize}
onChange={(e) => setFontSize(e.target.valueAsNumber)}
/>
</div>
// Text output from hooks
<div
editable
style={{ fontSize }}
onChange={(e) => setText(e.target.value)}
>
{text}
</div>
</div>
);
};
1.0.1
4 years ago
1.0.1-beta.0
4 years ago
1.0.0-beta.0
4 years ago
1.0.0-beta.1
4 years ago
1.0.0
4 years ago