React Slidify

React Slidify is a component that transmits position coordinates with callbacks at each step of an object that you can advance by dragging within a field. The component can be use as volume control, music player timeline etc.

Installation

Use the package manager yarn or npm to install react-slidify.

npm i @atayahmet/react-slidify --save

yarn add @atayahmet/react-slidify

Usage

import Slidify from '@atayahmet/react-slidify';

<Slidify
  width="250px"
  height="250px"
  points={[
    {
      x={10}
      y={300}
      width={20}
      height={20}
    }
  ]}
  axis="xy"
  onSlide={callback}
/> 

Props

ISlidifyOptions

| name | type | default| description | |----------|:-----------------------------------------|-------:|:----------------------------------| | width | string | 100% | Width of the field. | | height | string | 100% | Height of the field. | | points | IPoint[] | [] | | | multiple | boolean | false | Multiple points. | | movable | boolean | true | The points can move or vice versa.| | axis | string | xy | Available axes. | | defaultBackgroundColorOfPoint | string | red | Default background color of point.| | onStart | onStartHandlerArgs| - | First move event. | | onStop | onStopHandlerArgs | - | Last move event. | | onSlide | onSlideHandlerArgs| - | Active slide event. | | onReach | onReachHandlerArgs| - | Reach point event. |

IPoint

| name | type | default | description | |----------|:--------------------|-------------|:---------------------| | x | number | - | Left position px value. | | y | number | - | Top position px value. | | width | number | innerWidth | Width of the point in px. | | height | number | innerHeight | Height of the point in px.| | className| string (optional) | - | Custom class name. | | style | React.CSSProperties (optional) | - | Css properties. | | children | JSX Element | null | Pass JSX element to points. |

IEventPoint

| name | type | description | |----------|:--------------------|---------------------------------| | x | number | Left position px value. | | y | number | Top position px value. | | width | number | Width of the point in px. | | height | number | Height of the point in px. | | axis | string | Current axis. | | percent | IPercent | X and Y position as percent unit|

IPercent

| name | type | description | |----------|:--------------------|---------------------------------| | x | number | Left position percent value. | | y | number | Top position percent value. |

Events

| name | arguments | description | |----------|:--------------------------------------------|---------------------| | onStart | onStartHandlerArgs | First move event. | | onStop | onStopHandlerArgs | Last move event. | | onSlide | onSlideHandlerArgs | Active slide event. | | onReach | onReachHandlerArgs | Reach point event. |

Types

onStartHandlerArgs

(point: IEventPoint, index: number) => any

onStopHandlerArgs

(point: IEventPoint, index: number) => any

onSlideHandlerArgs

(point: IEventPoint, index: number) => any

onReachHandlerArgs

(point: IEventPoint, at: ReachPoint, index: number) => any

ReachPoint

'start-point' | 'end-point'

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT