react-sliding-item

react-sliding-item is a headless React component for creating mobile-friendly sliding interactions.

See it live on CodeSandbox: https://codesandbox.io/p/sandbox/epic-hofstadter-957rvm

https://github.com/iampava/react-sliding-item/assets/11327761/2e2330de-0a0f-4955-8b3f-db2ba9792f26

Installation

Make sure you have React installed in your project before installing react-sliding-item. You'll also need to have framer-motion as a peer dependency.

npm install react-sliding-item framer-motion

NOTE: this is a headless component coming with very little styling needed to correctly position things.

Usage

Here's an example that uses TailwindCSS as styling:

import { SlidingItem, resetAnimation } from 'react-sliding-item'

function App() {
  return (
    <div className='w-64 m-auto mt-20 overflow-hidden'>
      <SlidingItem
        left={<button className="bg-gray-500 text-white h-full w-full" onClick={resetAnimation}> More </button>}
        right={<button className="bg-red-500 text-white h-full w-full"> Delete </button>}
      >
        <div className="bg-gray-100 p-2">
          <h2> Fix vacuum cleaner</h2>
          <time className="text-gray-500 text-xs"> 10:03 AM</time>
        </div>
      </SlidingItem>
      <SlidingItem
        left={<button className="bg-gray-500 text-white h-full w-full" onClick={resetAnimation}> More </button>}
        right={<button className="bg-red-500 text-white h-full w-full"> Delete </button>}
      >
        <div className="bg-gray-100 p-2">
          <h2> Call pet groomer</h2>
          <time className="text-gray-500 text-xs"> 1:00 PM</time>
        </div>
      </SlidingItem>
      <SlidingItem
        left={<button className="bg-gray-500 text-white h-full w-full" onClick={resetAnimation}> More </button>}
        right={<button className="bg-red-500 text-white h-full w-full"> Delete </button>}
      >
        <div className="bg-gray-100 p-2">
          <h2> Restock cleaning suplies</h2>
          <time className="text-gray-500 text-xs"> 1:30 PM</time>
        </div>
      </SlidingItem>
    </div>
  )
}

export default App

Exports

This package exports 2 things:

1. A React component called <SlidingItem> with the following Prop definition:

type Props =
  {
    /** Configuration options for the sliding item. */
    options?: {
      /** Width of the left/right element in pixels. */
      max?: number;
      /** How far the user has to drag before the element is considered "swiped". This is a numeric value between 0 and `max` and represents pixels. */
      threshold?: number;
    };
    children: React.ReactNode;
  } & (
    | {
      right: JSX.Element;
      left?: JSX.Element;
    }
    | {
      right?: JSX.Element;
      left: JSX.Element;
    }
    | {
      right: JSX.Element;
      left: JSX.Element;
    }
  );

2. A function called resetAnimation that let's you return to the initial position.

Acknowledgements

Code was inspired from this Devon Govett's tweet: https://twitter.com/devongovett/status/1683882802977312770