Package Exports

staged-components
staged-components/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (staged-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Staged Components

Make React function component staged.

Install

yarn add staged-components
# or
npm install --save staged-components

Usages

React Hook is awesome, but it has some kind of rules. One of these rules is "Only Call Hooks at the Top Level".

So the component below will cause an error:

const App = function(props) {
  if (props.user === undefined) return null
  const [name, setName] = useState(props.user.name)
  // React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?
  return (
    <input value={name} onChange={(e) => {setName(e.target.value)}}/>
  )
}

With staged-components, you can safely "break" this rule:

const App = staged((props) => { // stage 1
  if (props.user === undefined) return null
  return () => { // stage 2
    const [name, setName] = useState(props.user.name)
    return (
      <input value={name} onChange={(e) => {setName(e.target.value)}}/>
    )
  }
})

Advanced

Usage with forwardRef:

const App = forwardRef(staged((props, ref) => {
  if (props.user === undefined) return null
  return () => {
    useImperativeHandle(ref, () => 'hello')
    return (
      <h1>{props.user.name}</h1>
    )
  }
}))