react-stillness-component
v0.9.1
Published
This package makes react-component static, with all dom operations disabled and invisible, and supports hook as well as class-component
Downloads
474
Maintainers
Readme
react stillness component
The keep-alive component of react.
supports:
React v16.8+
Features
- Minimal syntax, only one prop can be used to complete the component state storage
- Provides both Higher-Order Components and Hooks syntax for managing stilled components
- There is no additional lifecycle, and listeners are provided to respond to the stillness action
- Does not affect react's related api, including Context, Error Boundaries, etc., and even SyntheticEvent
- Automatic lazy loading to improve overall application performance
Usage
<StillnessProvider>
provides vuekeep-alive
-like capabilities to your app.// index.js import React from 'react' import ReactDOM from 'react-dom' import { StillnessProvider } from 'react-stillness-component'; import App from './App' ReactDOM.render( <StillnessProvider> <App /> </StillnessProvider>, document.getElementById('root') )
Use
<Offscreen>
to wrap components that need to be prepared for quiescence, and useuseStillness
to listen for relevant stillness behavior// App.js import React, { useState } from 'react' import { Offscreen,useStillness } from 'react-stillness-component'; function Count() { const [count, setCount] = useState(0); const collected = useStillness({ mounted: (contract) => { return 'mounted'; }, unmounted: (contract) => { return 'unmounted'; }, collect: (contract) => { return { isStillness: contract.isStillness(), stillnessId: contract.getStillnessId(), }; }, }); return ( <div className="count"> <p>{collected.isStillness}</p> <p>class count: {count}</p> <button onClick={() => { setCount((count) => count + 1); }} > Add </button> </div> ); } function App() { const [show, setShow] = useState(true) return ( <div> <button onClick={() => setShow(show => !show)}>Toggle</button> <Offscreen visible={show}> <Count /> </Offscreen> </div> ); }
For more api and examples, please refer to the documentation
Documentation
See the docs, tutorials and examples on the website:
-Under urgent production
Releases
See the changelog on the Releases page:
https://github.com/leomYili/react-stillness-component/releases