https://github.com/jul-sh/hook-into-props
Tiny HoC to use React hooks with class components.
https://github.com/jul-sh/hook-into-props
codesandbox higher-order-component hooks javascript react
Last synced: about 1 year ago
JSON representation
Tiny HoC to use React hooks with class components.
- Host: GitHub
- URL: https://github.com/jul-sh/hook-into-props
- Owner: jul-sh
- License: mit
- Created: 2019-02-09T19:11:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T11:19:35.000Z (over 3 years ago)
- Last Synced: 2025-04-03T00:34:26.154Z (about 1 year ago)
- Topics: codesandbox, higher-order-component, hooks, javascript, react
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/hook-into-props
- Size: 1.9 MB
- Stars: 47
- Watchers: 1
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# 🚢 hook-into-props
## Introduction
```jsx
import React from 'react'
import hookIntoProps from 'hook-into-props'
class DisplayWindowSize extends React.Component {
render() {
return this.props.windowSize
}
}
const useHooks = () => ({ windowSize: useWindowSize() })
export default hookIntoProps(useHooks)(DisplayWindowSize)
```
## Installation
You can install it via `npm i hook-into-props`. (200 bytes + 1kb dependencies. See [bundle-phobia](https://bundlephobia.com/result?p=hook-into-props))
Alternatively you can copy the [source code](index.js), it's only a few lines. If you don't feel like adding any abstractions at all, check out [without-abstractions](#without-abstractions).
## Examples
### Using props with hooks
```jsx
import React from 'react'
import hookIntoProps from 'hook-into-props'
class SearchResults extends React.Component {
render() {
this.props.isLoading ? 'loading' : this.props.searchResults
}
}
const useHooks = props => {
const [isLoading, searchResults] = useFetch(
`https://foo.com/?search=${props.searchTerm}`
)
return { isLoading, searchResults }
}
export default hookIntoProps(useHooks)(SearchResults)
```
### Using multiple hooks
```jsx
import React from 'react'
import hookIntoProps from 'hook-into-props'
import { ReferralCode, TimezoneOffset, FeatureList } from '~/contexts'
class UserForm extends React.Component {
componentDidMount() {
const { referralCode, timezoneOffset, featureList } = this.props
// ...
}
render() {
// ...
}
}
const useHooks = () => ({
referralCode: useContext(ReferralCode),
timezoneOffset: useContext(TimezoneOffset),
featureList: useContext(FeatureList)
})
export default hookIntoProps(useHooks)(UserForm)
```
### Exporting Higher-Order-Components
```jsx
export const withWindowSize = hookIntoProps(() => ({
windowSize: useWindowSize()
}))
```
## Under the hood
That's the (simplified) [source code](index.js):
```jsx
function hookIntoProps(useHooks) {
return function(Component) {
return function HooksProvider(props) {
return
}
}
}
```
(The hook calls in `useHooks` are only executed when `useHooks` is called inside of `HooksProvider`. At that point they are called within a function component, where we can use hooks. The results of our hook calls are passed as props)
## Alternatives
### Without abstractions
To avoid any helpers at all, we could inline a functional component in the export statement.
```jsx
import React from 'react'
class DisplayWindowSize extends React.Component {
render() {
return this.props.isLoading ? 'loading' : this.props.searchResults
}
}
export default function HooksProvider(props) {
const [isLoading, searchResults] = useFetch(
`https://foo.com/?search=${props.searchTerm}`
)
return (
)
}
```
This can work very well for simple cases. It lays out the logic in a verbose manner.
There's some caveats to this though. First, the export must be a named function declaration, as else you end up with an odd React tree of `Unkown` components. Secondly, with more complexity, this can become harder to read. It becomes more difficult to see at a glance which component is really being exported. Also, you'll have to remember to manually spread props every time.
### Render-props
We could also create a simple Component that allows us to consume hooks through render-props:
```jsx
import React from 'react'
const HookProvider = ({ children, useHooks }) => children(useHooks())
class DisplayWindowSize extends React.Component {
render() {
return (
useWindowSize()}>
{windowSize => {windowSize}}
)
}
}
```
This looks clean, but we won't have access to the hook result in our other class methods. This can make it poor choice for supporting existing class components.
### Rewriting your class as a function component
You could also refactor your class component and directly use hooks inside your new function component. However, refactoring existing classes isn't always an option.
Being able to use hooks with your old code can be convenient. It actually allows you to refactor existing higher order components to hooks without breaking support for your existing class components.