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.
npm install react-disksPlease note that dependencies of this package require React 18.0.0 or later.
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;| 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 |