padix

padix 🕹️

A coordinate driven input component for react that supports keyboard events

Install

# pnpm (recommended)
pnpm install padix

# npm 
npm install padix

# yarn
yarn install padix

Usage

import * as Padix from 'padix'

export function Example () {
  /* Coordinates will always be a normalized value between 0 and 1 */
  const [coordinates, setCoordinates] = useState({ x: 0.5, y: 0.5 })

  return (
    <Padix.Root 
      value={coordinates} 
      onChange={setCoordinates} 
      style={{
        width: 300,
        height: 300
      }}
    >
      {/* Describe labels */}
      <Padix.Label position={'top'}>{'Top Label'}</Padix.Label>
      
      {/* Apply custom class names or styles to the thumb element */}
      <Padix.Thumb style={{ backgroundColor: 'rebeccapurple' }} />
    </Padix.Root>
  )
}