Sweep - Docs

Getting startedSweep is a slide-up panel made using React, built using Web Animation API.

Installation Install the package using any package manager (npm, yarn, pnpm).

Terminal

npm install @aiko-lab/sweep@latest

Basic usage Wrap your app with a SweepWrapper component.

TypeScript

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

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

It is better to pass a background color and a foreground color as a class or as colors.

TypeScript

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

function RootLayout( ... ) {
  return (
    <html>
      <body>
        <SweepWrapper
            backgroundColor="#09090b"
            foregroundColor="#475569"
            
            // If you are using tailwindcss
            backgroundClassName="bg-zinc-950"
            foregroundClassName="bg-slate-600"
        >
            {children}
        </SweepWrapper>
      </body>
    </html>
  );
}
  
export default RootLayout;

Now you can use the custom hook and call the open() method to open Sweep.

TypeScript

Import { useSweep } from '@aiko-lab/sweep';
  
function Page = () => {
    const sweep = useSweep();

    const handleClick = () => {
        sweep.open(<CustomComponent key={1} / >);
  }

    return (
          <button onClick={handleClick} ... >
              Open Sweep.
          </button>
  );
};

To close sweep you can use the close() method, this will close any open Sweep.

TypeScript

Import { useSweep } from '@aiko-lab/sweep';

// Your code...
const sweep = useSweep();

const handleClick = () => {
  sweep.close();
}
// Your code...

To switch between two children, you can simply use the open() method, as long as they have different keys.

TypeScript

Import { useSweep } from '@aiko-lab/sweep';
  
function Page = () => {
    const sweep = useSweep();

    const openFirstComponent = () => {
        sweep.open(<FirstComponent key={1} / >);
  }

    const openSecondComponent = () => {
        sweep.open(<SecondComponent key={2} / >);
  }

    return (
         <>
           <button onClick={openFirstComponent} ... >Open First. </button>
           <button onClick={openSecondComponent} ... >Open Second. </button>
         </>
  );
};