Soprano-ui NPM

soprano-ui

React components tailored for use in media playing applications

Usage

Make sure you have react and react-dom installed in your project:

npm install react react-dom

Install this package:

npm install soprano-ui

Components

This packages exports two components.

MediaSlider is a modified/styled version of the Radix Slider component. It accepts three new props:

`keyboardFocusOnly`

Type: boolean
Default: false
Description: Prevents mouse clicks from focusing the slider when set to true. Note that the slider can still be focused using the Tab key and adjusted with the keyboard as usual.

`keyboardStepMultiplier`

Type: number
Default: 1
Description: Scales the amount that keyboard interactions will increment/decrement the slider value by. This would be useful for a media 'seek' slider, allowing precision control with a mouse but larger jumps (e.g. 5-10 seconds at a time) with a keyboard.

`thumbAlignment`

Type: "contain" | "center"
Default: "contain"
Description: Determines how the slider 'thumb' position is calculated. If set to "contain", the thumb will stay contained within the slider. If set to "center", the thumb will extend beyond the slider track so that it can stay centered on the current value.

SectionTree is a modified/styled version of react-arborist that allows the Tree component to be split into several 'sections'. Each section has a header, an empty state, and the ability to show or hide items in the section. As its implementation is quite rudimentary, the extended API and props of the SectionTree have not been documented yet.