Acrool React Block

This is a toast message function for React development notifications

Features

• Supports queue block list
• Plug and unplug using @acrool/react-portal and framer-motion

Install

yarn add framer-motion @acrool/react-block

in your packages. (Make the version of styled-component you use match the version of styled-component used in acrool-react-gird)

"resolutions": {
    "framer-motion": "^11.x"
}

Usage

add in your index.tsx

import "@acrool/react-block/dist/index.css";

add in your App.tsx

import {BlockPortal} from "@acrool/react-block";

const App = () => {
    return (
        <div>
            <BaseUsed/>
            <BlockPortal
                isVisibleQueueKey={false}
                loader={<Loader/>}
                defaultMessage="Loading..."
            />
        </div>
    );
};

then in your page

import {block} from '@acrool/react-block';
import {useEffect} from "react";

const Example = () => {

    useEffect(() => {
        block.show();
        
        setTimeout(() => {
            block.hide();
        }, 3000)
    }, []);

    return (
        <div>
            sample page
        </div>
    );
};

• block.show
• block.hide

There is also a example that you can play with it:

License

MIT © Acrool & Imagine