react-graphic-key

Customizable ReactJS component of graphic key

Install

npm install --save react-graphic-key

Usage

import React from 'react'
import GraphicKey from 'react-graphic-key'

function App() {
  render() {
    return <GraphicKey onEnd={points => alert('Selected '+points.join(', '))} />
  }
}

Component props

GraphicKey	component	props
width	optional (default: 3)	Number of points in width for graphic key area
height	optional (default: 3)	Number of points in height for graphic key area
onEnd	optional (function)	Callback which will be called with 1 argument — array of numbers, selected points
stylings	optional (object)	Object of styles for graphic key area (see fields below)

Customization

In order to customize component, you have to pass stylings object as prop.

stylings	object	fields
borderColor	css color string	Color of point border
borderWidth	css color string	Width of point border
backgroundColor	css color string	Background color of point
pointSize	number of pixels	Background color of point
pointMargin	number of pixels	outer margin from interactive area to row border
animateOnSelect	true or false	If true, background will change from transparent to backgroundColor on selection
hideLine	true or false	If true, selection line between points will be hidden
lineColor	css color string	Color of selection line
lineWidth	number of pixels	Width of selection line

css color string may be hex (#121212), rgb/rgba (rgba(0, 0, 0, 0.25)) or hsl.

Examples

import React from 'react'
import GraphicKey from 'react-graphic-key'

function App() {
  render() {
    return <GraphicKey width={3} height={1} />
  }
}

import React from 'react'
import GraphicKey from 'react-graphic-key'

function App() {
  render() {
    return <GraphicKey width={4} height={4} stylings={{
        backgroundColor: 'green',
        borderColor: 'blue'
      }} />
  }
}

IDs

ID of each point is count of points in row multiplied by row index plus it's position in row:

1 2 3
4 5 6
7 8 9

OR

 1  2  3  4  5
 6  7  8  9 10
11 12 13 14 15
16 17 18 19 20
21 22 23 24 25

OR

1 2 3 4  5
6 7 8 9 10

License

MIT © VityaSchel