@acrool/react-block
v1.0.0
Published
Block library based for Reactjs
Downloads
95
Maintainers
Readme
Acrool React Block
Features
- Supports queue block list
- Plug and unplug using
@acrool/react-portal
andframer-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: