@vpukhanov/react-character-map is an easy to include character map selector component built with React. It provides a simple user interface to select a character from a categorised list. It is based on the original react-character-map by Joel Day, but rebuilt from the ground up using TypeScript
and functional components.
npm install @vpukhanov/react-character-map
You can use the pre-configured CharMap component that includes the category menu and the character selector itself. Provide
onSelect callback to receive character data of the user's selection. Optionally provide the characterData prop to replace
the built-in symbols with your own. You can also change the category that is selected by default by passing in a
defaultSelectedCategory prop and define how the category names are displayed using the categoryNames prop.
import { CharMap } from "@vpukhanov/react-character-map";
// ...
<CharMap onSelect={(char) => alert(`You selected ${char.char}!`)} />;You can also use separate CharMapCategoriesList and CharMapSelector components if you want to build a custom layout.
They have to be wrapped in a CharMapContextProvider in order to function correctly.
import {
CharMapCategoriesList,
CharMapSelector,
CharMapContextProvider,
} from "@vpukhanov/react-character-map";
// ...
<CharMapContextProvider>
<CharMapCategoriesList />
<div>Some text between categories and selector</div>
<CharMapSelector onSelect={(char) => alert(`You selected ${char.char}!`)} />
</CharMapContextProvider>;CharMapContextProvider accepts the characterData, defaultSelectedCategory and categoryNames props described earlier.
CharMapCategoriesList allows for additional customisations by setting the optional buttonClassName and
activeButtonClassName props.
All contributions are welcomed, feel free to send a pull request straight away, unless it's a major change. In that case please create an issue for prior discussion.