React Combination Lock

React Component implement simple draggable combination lock

Demo

Install

npm install combination-lock-react

Usage

import React from 'react'
import CombinationLock from 'combination-lock-react'
import 'combination-lock-react/dist/index.css'

const App = () => (
  <div>
    <CombinationLock 
      code='01234' 
      height={70} 
      onMatch={() => { console.log('Unlock!') }}
      openText={'Unlocked!'}
    />
  </div>
);

export default App;

Props

|Props|Type|Default|Description| |---|:---:|---|---| |combination|string|'01234'|Correct combination (also response for the number of columns) |height|number|80|Column height (also response for font size) |openText|string|''|Text to be shown on combination match |onMatch|function|() => {}|Callback function on combination match |mainClass|string|combination-lock|CSS class name of component

License

MIT © alexeyivanov94 <[email protected]>