Package Exports

react-timeroller
react-timeroller/dist/time-roller.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-timeroller) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

TimeRoller

A React component for selecting a value from a range using a scrollable list. Ideal for time or value selection interfaces.

Installation
Usage
Props
Example
Contributing
License

Installation

To install the react-timeroller package, use npm or yarn:

npm install react-timeroller

Usage

Import the TimeRoller component and use it in your React application:

import React, { useState } from 'react';
import TimeRoller from 'react-timeroller';

function App() {
  const [selectedValue, setSelectedValue] = useState(2);
  const range = [1, 2, 3, 4, 5];

  return (
    <div className="App">
      <h1>Time Roller Demo</h1>
      <TimeRoller
        range={range}
        unit="hours"
        selectedValue={selectedValue}
        setSelectedValue={setSelectedValue}
      />
      <p>Selected value: {selectedValue}</p>
    </div>
  );
}

export default App;

Props

`range` (required)

Type: Array<number | string>
Description: An array of values that the roller can select from.

`unit` (required)

Type: string
Description: A string representing the unit of the values (e.g., "hours", "minutes").

`selectedValue` (required)

Type: number | string
Description: The currently selected value.

`setSelectedValue` (required)

Type: function
Description: A function to update the selected value.

Example

Here is a complete example of how to use the TimeRoller component:

import React, { useState } from 'react';
import TimeRoller from 'react-timeroller';

function App() {
  const [selectedValue, setSelectedValue] = useState(2);
  const range = [1, 2, 3, 4, 5];

  return (
    <div className="App">
      <h1>Time Roller Demo</h1>
      <TimeRoller
        range={range}
        unit="hours"
        selectedValue={selectedValue}
        setSelectedValue={setSelectedValue}
      />
      <p>Selected value: {selectedValue}</p>
    </div>
  );
}

export default App;

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any bugs or improvements.

License

This project is licensed under the MIT License.

react-timeroller