@reach/component-component

Docs | Source

NOTE: This component was developed in the days before React Hooks. In most cases, you should probably build your function components using hooks and use a class component in the rare cases you need them. We may deprecate this component in the future.

A dynamic, functional version of React.Component, a component component if you will. Useful for inline lifecycles and state.

<Component initialState={{ hue: 0 }}>
  {({ setState, state }) => (
    <div style={{ textAlign: "center" }}>
      <button onClick={() => setState({ hue: Math.random() * 360 })}>
        Generate Triad Colorscheme
      </button>
      <br />
      {[1, 2, 3].map(n => (
        <div
          key={n}
          style={{
            display: "inline-block",
            margin: 10,
            width: "2em",
            height: "2em",
            borderRadius: "50%",
            background: `hsl(${state.hue + n * 120}, 50%, 50%)`,
            transition: "background-color 200ms ease"
          }}
        />
      ))}
    </div>
  )}
</Component>

Current Tags

• 0.10.1                                ...           latest (5 years ago)
• 0.4.0-beta.0                                ...           next (6 years ago)

4 Versions

• 0.1.3                                ...           6 years ago
• 0.4.0-beta.0                                ...           6 years ago
• 0.10.1                                ...           5 years ago
• 0.4.0                                ...           6 years ago