Sweep - Docs

API PreferencesSweep components and how to use them.

SweepWrapper AnatomyThis contains one single component that wraps your app.

TypeScript

<SweepWrapper>
    ...
</SweepWrapper>

SweepWrapper PropsDescription of each SweepWrapper prop.

Prop	Type	Required	Description
backgroundColor	string	false	The background color of the slide-up panel.
foregroundColor	string	false	The background color of your App.
backgroundClassName	string	false	With TailwindCSS, pass the background color of the panel as a class, for example: bg-indigo-900
backgroundClassName	string	false	With TailwindCSS, pass the background color of your app as a class, for example: bg-indigo-600

useSweep AnatomyuseSweep is a hook that comes with Sweep.

TypeScript

const sweep = useSweep( config , callbacks );
...
sweep.open( ... );
...
sweep.close();

useSweep MethodsDescription of the methods returned by the hook.

Method	Parameters	Description
open( element )	element: The component to display.	Opens the sweep panel.
close()	None	Closes any open sweep.

useSweep ParamsDescription of properties of the hook.

Prop	Type	Description
config	sweepConfig	Enable and disable some functionalities.
callbacks	sweepCallbacks	Call-back funtions.

config AnatomyYour can enable and disable some functionalities using the config property.

TypeScript

sweepConfig : {
    blur: boolean,
    disableTouchEvents: boolean,
    blockBodyClick: boolean,
    clickBodyToClose: boolean,
    borderRadius: number,
    snapPoint: number
}

config KeysDescription of the keys of the config.

Key	Default	Description
blur	false	Adds 10px of blur to every sweep animation.
disableTouchEvents	false	Disables all touch events.
blockBodyClick	false	Prevents users from clicking the children of SweepWrapper when the panel is open.
clickBodyToClose	false	Closes the panel when the user clicks the children of SweepWrapper.
borderRadius	20	The border radius of the bottom left and right corners of your App when the panel is open (in pixels).
snapPoint	50	px threshold before drag-to-close fires

callbacks AnatomyCallbacks from the useSweep hook.

TypeScript

callbacks : {
    onToggle: (state: boolean) => void,
    onSwitch: (oldChildren: React.ReactNode, newChildren: React.ReactNode) => void
}

callbacks KeysDescription of the keys of the callbacks param.

Key	Parameters	Description
onToggle	state	Triggered on sweep panel open/close, receiving a boolean for its state.
onSwitch	oldChildren,newChildren	Triggered on content switch in the open sweep panel, passing old and new content.

Types You can import the types from the package.

TypeScript

import { sweepConfig, sweepCallbacks } from "@aiko-lab/sweep";

Types sweepConfigThe code of sweepConfig type.

TypeScript

type sweepConfig = {
  blur?: boolean;
  disableTouchEvents?: boolean;
  blockBodyClick?: boolean;
  clickBodyToClose?: boolean;
  borderRadius?: number;
};

Types sweepCallbacksThe code of sweepCallbacks type.

TypeScript

type sweepCallbacks = {
  onToggle?: (state: boolean) => void;
  onSwitch?: (
    oldChildren: React.ReactNode;
    newChildren: React.ReactNode
  ) => void;
};