React Slider

A swipe-to-unlock style slider component built with React.

Getting Started

Install Dependencies

npm install

Run Storybook

npm run storybook

This will start Storybook on http://localhost:6006

Build Storybook

npm run build-storybook

Installation

npm install @1imo/react-slider

Component Usage

import React, { useRef, useEffect } from 'react';
import Slider from '@1imo/react-slider';

function App() {
  const verifiedRef = useRef(false);
  
  useEffect(() => {
    if (verifiedRef.current) {
      console.log('Slider verified!');
      // Do something when slider is verified
    }
  }, [verifiedRef.current]);
  
  return <Slider verifiedRef={verifiedRef} />;
}

Props

• verifiedRef (optional): A ref object that will be set to true when the slider is successfully dragged to the end, and reset to false after the animation completes.

Storybook Stories

The component includes several stories in Storybook:

• Default: Basic slider with console logging
• WithAlert: Slider with alert notification
• WithoutRef: Slider without verification tracking