https://github.com/ivliu/react-offscreen
react offscreen component like vue keep-alive
https://github.com/ivliu/react-offscreen
keep-alive offscreen react react-offscreen
Last synced: about 1 month ago
JSON representation
react offscreen component like vue keep-alive
- Host: GitHub
- URL: https://github.com/ivliu/react-offscreen
- Owner: IVLIU
- License: mit
- Created: 2023-04-26T10:16:06.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-03-15T13:44:24.000Z (2 months ago)
- Last Synced: 2025-04-04T07:16:53.949Z (about 2 months ago)
- Topics: keep-alive, offscreen, react, react-offscreen
- Language: TypeScript
- Homepage:
- Size: 15.7 MB
- Stars: 136
- Watchers: 3
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-offscreen(activity)
react-offscreen can hide components without uninstalling them
## Features
- based on Suspense
- minzip only 1.2kb
- good performance
- react full context support
## Installation
```bash
npm install @ivliu/react-offscreen
yarn add @ivliu/react-offscreen
pnpm add @ivliu/react-offscreen
```
## Examples
### Basic usage
```typescript
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { Activity } from '@ivliu/react-offscreen';
const Counter = () => {
const [count, setCount] = useState(0);
return
setCount(count + 1)}>{count}
;
};
const App = () => {
const [open, setOpen] = useState(false);
return (
setVisible(!open)}>{open}
);
};
ReactDOM.createRoot(document.getElementById('root')!).render();
```
### Use with createPortal
```typescript
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { createPortal } from 'react-dom';
import { Activity } from '@ivliu/react-offscreen';
const Counter = () => {
const [count, setCount] = useState(0);
return createPortal(
setCount(count + 1)}>count is {count},
document.body,
);
};
const App = () => {
const [open, setOpen] = useState(false);
return (
setVisible(!open)}>{open}
);
};
ReactDOM.createRoot(document.getElementById('root')!).render();
```
### Use with React.lazy
> Since Activity is implemented based on Suspense, please pay attention to placing the Suspense component under the Activity component when using it, otherwise it may cause the problem that the fallback cannot be displayed normally.
```typescript
import { useState, lazy, Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { Activity } from '@ivliu/react-offscreen';
const LazyCount = lazy(() => import('./Count'));
const Count = () => {
const [count, setCount] = useState(0);
return
setCount(count + 1)}>{count}
;
};
const App = () => {
const [open, setOpen] = useState(false);
return (
setVisible(!open)}>{open}
);
};
ReactDOM.createRoot(document.getElementById('root')!).render();
```
## Rename to Activity
> In order to keep pace with the official react, we renamed Offscreen to Activity. At the same time, we will still export Offscreen
```typescript
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { Activity, Offscreen } from '@ivliu/react-offscreen';
const Count = () => {
const [count, setCount] = useState(0);
return
setCount(count + 1)}>{count}
;
};
const App = () => {
const [open, setOpen] = useState(false);
return (
setVisible(!open)}>{open}
);
};
ReactDOM.createRoot(document.getElementById('root')!).render();
```
## typescript
```typescript
import { useState } from 'react';
import ReactDOM from 'react-dom/client';
import { Activity } from '@ivliu/react-offscreen';
import type { ActivityMode } from '@ivliu/react-offscreen';
const Count = () => {
const [count, setCount] = useState(0);
return
setCount(count + 1)}>{count}
;
};
const App = () => {
const [mode, setMode] = useState('visible');
return (
setMode(mode === 'visible' ? 'hidden' : 'visible')}>{mode}
);
};
ReactDOM.createRoot(document.getElementById('root')!).render();
```
## unstable hooks
> We provide hook implementation for component activation and deactivation status, but we do not plan to merge it into the main branch. If you need it, please refer to https://github.com/IVLIU/react-offscreen/tree/feat/unstable-hooks
```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Offscreen, useActivated } from 'react-offscreen';
const Count = () => {
const [count, setCount] = React.useState(0);
useActivated(() => {
console.log('activated');
return () => {
console.log('deactivated')
}
});
return
setCount(count + 1)}>{count}
;
};
const App = () => {
const [visible, setVisible] = React.useState(false);
return (
setVisible(!visible)}>{visible}
);
};
ReactDOM.createRoot(document.getElementById('root')!).render();
```
## Notice
please use react16.8 and above versions