Code Monkey home page Code Monkey logo

acrool-react-block's Introduction

Acrool React Block

Acrool React Block Logo

This is a toast message function for React development notifications

NPM npm npm

npm downloads npm

Features

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

Install

yarn add @acrool/react-block

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}
                renderLoader={<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
  • toast.hideAll

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

Play react-editext-example

License

MIT © Acrool & Imagine

acrool-react-block's People

Contributors

imagine10255 avatar

Stargazers

 avatar

Watchers

Lucian avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.