https://github.com/vpukhanov/react-character-map

An easy to include character map selector component built with React
https://github.com/vpukhanov/react-character-map

character-map component component-library react

Last synced: 8 days ago
JSON representation

An easy to include character map selector component built with React

• Host: GitHub
• URL: https://github.com/vpukhanov/react-character-map
• Owner: vpukhanov
• License: mit
• Created: 2020-05-27T08:33:51.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-08-29T07:32:52.000Z (3 months ago)
• Last Synced: 2024-10-29T05:07:46.633Z (17 days ago)
• Topics: character-map, component, component-library, react
• Language: TypeScript
• Homepage: https://react-character-map.js.org
• Size: 2.95 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# @vpukhanov/react-character-map [![Storybook](https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg)](https://react-character-map.now.sh/)

`@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.

[View live Storybook example](https://react-character-map.now.sh/)



  

    

  



## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

  - [Basic Usage](#basic-usage)

  - [Advanced Usage](#advanced-usage)

- [Contributions](#contributions)

## Installation

```

npm install @vpukhanov/react-character-map

```

## Usage

### Basic Usage

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.

```tsx

import { CharMap } from "@vpukhanov/react-character-map";

// ...

 alert(`You selected ${char.char}!`)} />;

```

### Advanced Usage

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.

```tsx

import {

  CharMapCategoriesList,

  CharMapSelector,

  CharMapContextProvider,

} from "@vpukhanov/react-character-map";

// ...

  

  
Some text between categories and selector

   alert(`You selected ${char.char}!`)} />

;

```


`CharMapContextProvider` accepts the `characterData`, `defaultSelectedCategory` and `categoryNames` props described earlier.

`CharMapCategoriesList` allows for additional customisations by setting the optional `buttonClassName` and

`activeButtonClassName` props.

## Contributions

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.