React-styleguidist: Support Hooks in examples

[sapegin]

The problem

Hooks could be a better way to use state in examples, than our custom initialState. But they don't work right now because we're wrapping example code in a class component, and hooks only work in a function component.

const [primary, setPrimary] = React.useState(false);
<Button isPrimary={primary} onClick={() => setPrimary(true)}>Push me</Button>

Proposed solution

Wrap examples in a function component and pass state from the current wrapper class component as a prop.

Alternative solutions

1. Drop React < 16.8 support and use hooks to manage state: rewrite the current state manager as a function component with state.

2. Consider removing the initialState and rely on hooks only. (Breaking change.)

   2.1. Deprecate initialState / setState, update all docs and examples to hooks. Remove in the next major release.

Additional context

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

[eragon512]

hey, I would like to work on this issue

[sapegin]

@eragon512 That's awesome! 👍

[eragon512]

Opened PR #1353 which implements the proposed solution, as it seemed to be the simplest way to support both legacy and new applications.

If dropping React < 16.8 support is an option, then I would be happy to refactor the wrapper class to implement hooks

[eragon512]

@sapegin Closing this issue, as it has been addressed in #1353 , please reopen if I am mistaken

[hugotox]

Hello! What's the way to document components that use hooks? I'm getting the Invalid hook call error mentioned in the OP