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