react-keep

Higher order component which conditionally keeps and passes down previous values of selected props in subsequent renders.

Check out Codesandbox project

Motivation

This library is an effect of repeating same pattern multiple times while I was working on React based web applications.

The problem I often encounter is a need to keep current visual state of component after it receives new props which affect its render output. There are situations when data coming from Redux or local state is no longer available and I want to gracefully hide component which just moment ago was displaying data. During hiding animation user can still see immediately disappearing data. It doesn't look good.

One approach could be to somehow synchronize visual component with source of data. But doing it this way, we are making source of data aware of presentation layer.

My approach is about wrapping visual component with hoc which remembers how props looked before they became unavailable.

Installation

npm

npm install --save react-keep

yarn

yarn add react-keep

API

withKeep(WrappedComponent, propsToKeep, shouldUseKeptProps)

• WrappedComponent - function - React component of any kind which receives kept props

• propsToKeep - string[] - list of props names. Example: ["name", "description"]

• shouldUseKeptProps - (props: object) => boolean

  The one and only argument is the most recent props object passed to enhanced component. Function should return truthy value if wrapped component should receive remembered props. Falsy value should be returned otherwise. Example: ({message}) => message === undefined

Returned value: React component

Notes:

Returned component remembers the most recent values of props defined in propsToKeep as long as shouldUseKeptProps returns falsy value. When shouldUseKeptProps returns truthy value, remembered props are passed down to WrappedComponent along with other props untouched.

If shouldUseKeptProps returns truthy since very beginning, all original props are passed down as there was nothing before to remember.

If propsToKeep is not an array or shouldUseKeptProps is not a function, withKeep returns original WrappedComponent so no props are kept.

How to use it

1. Create enhanced component

import withKeep from 'react-keep';

const CounterWithKeep = withKeep(
  Counter,
  ["number"],
  ({ number }) => number === 0;
);

2. Pass first set of props

<CounterWithKeep visible={true} number={1} />

3. Pass new set of props

<CounterWithKeep visible={false} number={0} />

As a result, Counter instance will disappear and "1" will still be displayed.

Example

Go to codesandbox to play with examples.