React Character Map

Include a character map in your app using our React Character Map.

It provides a simple interface for users to select a character from a list of categorised characters.

Installation

``
npm install react-character-map
`

or
`
yarn add react-character-map
`




Usage

`js
// Import the module into your react app
import {CharacterMap} from 'react-character-map';
`

`js
// Use the element;
characterData={optionalCustomCharacterData}
onSelect={function(char,el){ console.log(char, el); }}
/>
`




$3

* autofocus (boolean): When autofocus is true, the component's search input will be focused on mount. Default: true.

* characterData is an optional property that overrides the default character map. characterData should be provided in the form:
`js
{
"TAB NAME": [
{ "entity": "©", "hex": "�A9;", "name": "COPYRIGHT SIGN", "char": "©" } // char is required
],
"ANOTHER TAB": [
{ MORE CHARACTER DATA }
]
}
`
* onSelect callback: This is fired when the user clicks on a character, and has two parameters;

`js
onSelect(char, el)
`

char is an Object of the character that has been selected, for instance;

`js
{ "hex": "ćB;", "name": "BLACK SMILING FACE", "char": "☻" }
`
or
`js
{ "char":"ø" }
`

The second parameter el is the element that has been selected, this is an anchor.
`html
Ø
``

$3

The package comes with very basic styling, it is recommended that you style it to match your app.


$3

Thank you to the contributors for actively improving and making suggestions to the repo.

https://github.com/Dayjo/react-character-map/graphs/contributors

* @adamsilverstein
* @jeffpaul