React.js Action Sheet

preview.mov

reactjs-action-sheet is built on top of Vaul.

Apple's action sheet is common native a modal view that presents choices related to an action people initiate. This component brings the same experience, but for the web.

Usage

To start using the library, install it in your project:,

npm install reactjs-action-sheet

Use the action sheet in your app.

import ActionSheet, { Action } from "reactjs-action-sheet";

function MyComponent() {
    return (
        <ActionSheet
            actions={[
                <Action>Action 1</Action>,
                <Action>Action 2</Action>,
                <Action destructive>Action 3</Action>,
            ]}
        >
            <button>open</button>
        </ActionSheet>
    );
}