react-disks

A shared react component for a stack of rotatable disks containing text.

If an m×n array of text items is passed to the component, m disks will render with n items evenly spaced around each disk.

Installation

npm install react-disks

Please note that dependencies of this package require React 18.0.0 or later.

Example

import ReactDisks from 'react-disks';

function App() {
  return (
    <ReactDisks
      disksText={[['a', 'b', 'c', 'd'], ['e', 'f', 'g', 'h'], ['i', 'j', 'k', 'l']]}
      onRotate={(rotatedDisksText) => console.log(rotatedDisksText)}
      theme={{main: "magenta", light: "plum", dark: "darkmagenta"}}
      disabled={false}
      swipeMode={false}
      swipeContainer={".someContainer"}
      darkMode={false}
    />
  );
}

export default App;

Props

| Prop | Type | Required | Description | |-------------------- |------------ |-------------- |-------------------------------------------------------------------------- | | disksText | 2D array | yes | Text to be displayed in each disk | | onRotate | function | no | Function called after a disk is rotated (use to obtain new order of text) | | theme | object | no | Component colouring (options: main, light, and dark) | | disabled | boolean | no | Whether the disks should be disabled | | swipeMode | boolean | no | Whether the disks are rotated via swipe gestures | | swipeContainer | string | no | Selector for a container to restrict swipe gesture detection | | darkMode | boolean | no | Whether the component theming should be dark or light |