A minimal slide-up panel built for React ⦁ Live preview ⦁ Documentation
Key Features • How To Use • API Preferences • License
- 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.
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!The SweepWrapper usually wraps the application.
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>| Prop | Type | Required | Description |
|---|---|---|---|
children |
ReactNode | true |
In short, your App. |
foregroundColor |
String | false |
Your App's background color. |
backgroundColor |
String | false |
The slide-up panel's background color. |
foregroundClassName |
String | false |
In case you are using tailwindCSS you could pass the background color (App) as a className. example: bg-indigo-600 |
fbackgroundClassName |
String | false |
In case you are using tailwindCSS you could pass the background color (Panel) as a className. example: bg-indigo-900 |
The custom hook provided by Sweep..
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();| Method | Parameters | Description |
|---|---|---|
open(element) |
element : JSX or React component to display. |
Opens the sweep panel and displays the content. |
close() |
None | Closes the sweep panel. |
| Prop | Type | Default | Description | |
|---|---|---|---|---|
config |
blur |
boolean | false |
Adding a 10px of blur to every animation. |
disableTouchEvents |
Boolean | false |
Disable all gestures and touch-based interactions. | |
blockBodyClick |
Boolean | false |
Block clicks on the body when Sweep panel is open. | |
clickBodyToClose |
Boolean | false |
Clicking outside on the body closes the panel | |
borderRadius |
Number | 20 |
The border radius size (px) of the body when the panel is open. | |
| Prop | Parameters | Description | |
|---|---|---|---|
callbacks |
onToggle(state) |
element : Indicates whether the panel is open or closed. |
Triggered whenever the sweep panel's open/close. |
onSwitch(old,new) |
old : The content of the panel before the switch.new : The new content that is about to replace the old content in the panel |
Triggered when the content inside the sweep panel switches while it is open. | |
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).
MIT
ai-ko.dev · Twitter @username_aiko