font-tester

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>
  );
};