@aiko-lab/sweep NPM

screenshot

Key Features

Simple to Use: A clean and easy-to-understand API that gets you up and running in no time.
Effortless Animations: It comes with transitions for opening, closing, and switching children.
Built for Speed: Lightweight and optimized for great performance, even on slower devices.

How To Use

Install Sweep using npm:

npm install @aiko-lab/sweep@latest

Wrap your App with a SweepWrapper

import { SweepWrapper } from "@aiko-lab/sweep";

export default function App({children}) {
  return (
    <html>
      <body>
        <SweepWrapper>
          {children}
        </SweepWrapper>
      </body>
    </html>
  );
}

Pass a backgroundColor and foregroundColor to the SweepWrapper component or through a ClassName.

<SweepWrapper
  backgroundColor="hsl(0, 0%, 0%)"
  foregroundColor="hsl(0, 0%, 10%)"
>
  {children}
</SweepWrapper>

Use the hook to open Sweep.

import { useSweep } from "@aiko-lab/sweep";

// Call the custom hook:
const sweep = useSweep();

// Call the open() method and pass the content as JSX:
sweep.open(<Component key={1}/>)

// And don't forget to add a custom key for each component!

API preferences

SweepWrapper

The SweepWrapper usually wraps the application.

Anatomy

import { SweepWrapper } from "@aiko-lab/sweep";

...

<SweepWrapper
  foregroundColor="hsl(0, 0%, 0%)"
  backgroundColor="hsl(0, 0%, 10%)"
  foregroundColorClass="bg-black"
  backgroundColorClass="bg-white"
>
  {children}
</SweepWrapper>

Preferences

useSweep

The custom hook provided by Sweep..

Anatomy

import { useSweep } from "@aiko-lab/sweep";

...

const sweep = useSweep({
    blur: false,
    disableTouchEvents: false,
    blockBodyClick: false,
    clickBodyToClose: false,
    borderRadius: 20,
  }, {
    onToggle: (state) => {
      console.log(state);
    },
    onSwitch: (oldChildren, newChildren) => {
      console.log(oldChildren, newChildren);
    },
});

...

sweep.open(<Component key={2} />);

...

sweep.close();

Preferences

Note: if you call the open() method while sweep is already open, it will automatically animate between the two as long as they are different (they have different keys).