@washingtonpost/red-react-lib

red-react-lib

This lib points to be a shared codebase for the different projects inside the WP.

For the time being we are using it as a git subtree

Updating this lib

In order to update/commit an update, the code needs to be built before pushing. Please just edit the src folder contents The components folder will be generated by the build script.

To build the project just run

yarn install
yarn build

hooks

• hooks
  • .usePromiseCallback(promise, deps, delayMS)
  • .usePromise(promise, deps, delayMS)
  • .usePrevious(value)

hooks.usePromiseCallback(promise, deps, delayMS)

usePromiseCallback Hook

Hook dedicated to offer a sync way of accessing a promise state.

Keeps the last result until new results are loaded, to avoid UI flashes.

Supports a delayMS param to customise the loading threshold, to avoid UI flashes.

Only processes the last promise call.

Kind: static method of hooks

Param	Type	Description
promise	Promise	The promise that would be wrapped
deps	Array.<any>	extra deps used to re-create the callback
delayMS	number	The delay in ms to switch the loading state to true

Example

const [callback, result, loading, err] = usePromiseCallback(Promise.resolve, [], 500)

hooks.usePromise(promise, deps, delayMS)

usePromise Hook

Wrapped usePromiseCallback.

It gets triggered on init and every time the args change by default.

Useful to fetch page data.

Kind: static method of hooks

Param	Type	Description
promise	Promise	The promise that would be wrapped
deps	Array.<any>	deps to call the function with
delayMS	number	The delay in ms to switch the loading state to true

Example

const [callback, result, loading, err] = usePromise(Promise.resolve, ["hello"], 500)

hooks.usePrevious(value)

usePrevious Hook

Got from https://usehooks.com/usePrevious/ It saves the previous value of props or state

Kind: static method of hooks

Param	Type	Description
value	*	The value to save

Example

const [state, setState] = React.useState()
const prev = usePrevious(state)