Skip to content

LaunchPadLab/lp-hoc

This branch is 1 commit ahead of master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4308ccc · Jun 14, 2022

History

70 Commits
Jun 14, 2022
Dec 9, 2019
Jan 28, 2020
Dec 9, 2019
Oct 11, 2017
Jan 7, 2020
Jun 26, 2019
Jan 28, 2020
Aug 7, 2019
May 1, 2019
Jan 28, 2020
Oct 11, 2017
Feb 26, 2020
Jun 26, 2019
Dec 9, 2019
Dec 20, 2018
Jun 14, 2022
Jun 14, 2022

Repository files navigation

npm version

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

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.