Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including staged-components with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var stagedComponents = require("staged-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

staged-components v1.0.0

Make React function component staged.

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)}}/>
    )
  }
})

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free