https://github.com/kunukn/react-forceupdate
React hooks for force updating components
https://github.com/kunukn/react-forceupdate
Last synced: about 2 months ago
JSON representation
React hooks for force updating components
- Host: GitHub
- URL: https://github.com/kunukn/react-forceupdate
- Owner: kunukn
- License: mit
- Created: 2020-04-25T12:34:15.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-23T21:25:59.000Z (almost 5 years ago)
- Last Synced: 2025-01-31T07:31:12.037Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 277 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-forceupdate
[](https://www.npmjs.com/package/react-forceupdate)
[](https://www.npmjs.com/package/react-forceupdate)
[](https://bundlephobia.com/result?p=react-forceupdate)
[](https://github.com/kunukn/react-forceupdate/blob/master/LICENSE)
## About
React hooks for force updating components.
Force update from anywhere to those using a useForceUpdate hook with optional payload.
## Install
```bash
npm install mittt react-forceupdate
# or
# yarn add mittt react-forceupdate
```
## Usage example
### Basic
```jsx
import { runForceUpdate, useForceUpdate } from 'react-forceupdate'
let nonReactive = {
something: 'waiting...',
}
let Component1 = () => {
useForceUpdate()
return
{nonReactive.something}
}
let Component2 = () => {
useForceUpdate()
return
{nonReactive.something}
}
function App() {
let onUpdate = () => {
// apply non-reactive changes.
nonReactive.something = 'something updated'
runForceUpdate()
}
return (
Force update
)
}
```
### With eventType or payload
```jsx
import { runForceUpdate, useForceUpdate } from 'react-forceupdate'
let Alpha = () => {
let { eventType, subscribedTo, payload } = useForceUpdate('alpha')
return
Alpha: {payload && payload.message}
}
let Bravo = () => {
let { eventType, subscribedTo, payload } = useForceUpdate('bravo')
return
Bravo: {payload && payload.message}
}
let Star = () => {
let { eventType, subscribedTo, payload } = useForceUpdate('*') // runs on any event type
return
Star: {payload && payload.message}
}
function App() {
let onUpdateAlpha = () => {
const payload = { message: 'hi' }
runForceUpdate('alpha', payload)
}
let onUpdateBravo = () => {
runForceUpdate('bravo')
}
return (
Force update alpha
Force update bravo
)
}
```
## Demo
- https://codesandbox.io/s/react-forceupdate-library-vb2x2
- https://codesandbox.io/s/react-forceupdate-pioue
## API
### useForceUpdate
```jsx
import { useForceUpdate } from 'react-forceupdate'
function ReceiverComponent() {
// re-render this component on 'default' event
useForceUpdate() // same as useForceUpdate('default')
// re-render this component on this event
useForceUpdate('alpha')
// re-render this component on this event with received data
let { eventType, payload, subscribedTo, eventCount } = useForceUpdate('bravo')
return
component {payload.message}
}
```
### runForceUpdate
```jsx
import { runForceUpdate } from 'react-forceupdate'
function SenderComponent() {
let onUpdate = () => {
runForceUpdate() // same as runForceUpdate('default')
}
let onAlphaUpdate = () => {
runForceUpdate('alpha')
}
let onBravoUpdate = () => {
runForceUpdate('bravo', { message: 'hi' })
}
return (
re-render receiver components
re-render alpha receiver components
re-render bravo receiver components with provided payload
)
}
```
## TypeScript
```jsx
import {
useForceUpdate,
runForceUpdate,
UseForceUpdateState,
} from 'react-forceupdate'
function ReceiverComponent({ type }) {
let state: UseForceUpdateState = useForceUpdate(type)
return
{state.payload}
}
```