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

1. <StillnessProvider> provides vue keep-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')
   )
   

2. Use <Offscreen> to wrap components that need to be prepared for quiescence, and use useStillness 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