react-stillness-component

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 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')
  )
  

• 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