lp-hoc

A set of React higher order components (HOCs).

Higher order components wrap components to give them extra functionality. For instance, defining a callback to be triggered when a component mounts:

import { onMount } from '@launchpadlab/lp-hoc'

function MyComponent() {
  return <div>I'm a component</div>
}

function myMountFunction(props) {
  // will be called when component mounts
}

export default onMount(myMountFunction)(MyComponent)

HOCs allow you to replicate the functionality of class-based components using functional components. The HOCs in this library can be combined with those from recompose- in fact, you can think of this library as an extension to that one.

A list of all available HOCs can be found in the documentation.

A note about hooks

The use case of HOCs has been largely addressed by the addition of React hooks in v16.8. If possible, we recommend you use hooks instead of HOCs when building new components.

Here's a handy reference for determining which hooks solve for the use-cases of lp-hoc components (corresponding recompose components in parentheses):

1. getSet (withState) -> useState
2. modifyProps (withProps) -> useMemo and useCallback
3. onMount -> useEffect
4. onUnmount -> useEffect
5. onUpdate -> useEffect
6. waitFor -> if statements

Documentation

Documentation and usage info can be found in docs.md.

Migration Guides

• From lp-utils
• v2.0.0
• v3.0.0
• v4.0.0
• v5.0.0

Contribution

This package follows the Opex NPM package guidelines. Please refer to the linked document for information on contributing, testing and versioning.

Additional info

Cherry-picking imports

Along with ES module support, this library supports cherry-picked imports from the lib folder to reduce bundle sizes:

import onUpdate from '@launchpadlab/lp-hoc/lib/onUpdate'
import onMount from '@launchpadlab/lp-hoc/lib/onMount'

You can also combine this feature with babel-plugin-transform-imports to cherry-pick imports by default:

// .babelrc
{
    "plugins": [
        ["transform-imports", {
            "@launchpadlab/lp-hoc": {
                "transform": "@launchpadlab/lp-hoc/lib/${member}",
                "preventFullImport": true
            }
        }]
    ]
}

Size Limit

This library uses size-limit to prevent size bloat. The yarn size script is run in CI to check that the package size is under the limit specified in .size-limit.js. For a visualization of this package's relative dependency sizes, you can run yarn size --why.