jul-sh/hook-into-props

Tiny HoC to use React hooks with class components.

—ฅ/ᐠ. ̫ .ᐟ\ฅ —

Juliette says hi.

hook-into-props's Issues

Consider filtering props

The helper currently exposes a way to utilize the component's props & add props to the component.

const useHooks = props => {
  const [isLoading, searchResults] = useFetch(
    `https://foo.com/?search=${props.searchTerm}`
  )

  return { isLoading, searchResults }
}

export default hookIntoProps(useHooks)(SearchResults)

In this case, props.searchTerm may not be required in the actual SearchResults component. What if props were passed through (instead of just to) the function passed to hookToProps? This would allow filtering:

const useHooks = ({ searchTerm, componentProps }) => {
  const [isLoading, searchResults] = useFetch(
    `https://foo.com/?search=${searchTerm}`
  )

  return { ...componentProps, isLoading, searchResults }
}

export default hookIntoProps(useHooks)(SearchResults)

Seems nice, but would require doing this at all times, even if useHooks does not use props itself:

class DisplayWindowSize extends React.Component {
  // ...
  render() {
    this.props.windowSize
  }
}

const useHooks = props => ({ ...props, windowSize: useWindowSize() }))

export default hookIntoProps(useHooks)(DisplayWindowSize)

Add tests

Add TypeScript support

Types are a little tricky here, but would be cool to have.