react-forceupdate


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

$3

`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

)
}
`

$3

`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

$3

`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 payload
let { payload } = useForceUpdate('bravo')

return

component {payload.message}

}
`

$3

`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

)
}
``