Outline of Potential React Hooks for the Reakit Component Library (The "new" examples are extremely simplified, not meant to be suggestions for final implementation

hidden.jsx

// <Hidden />
// Render Prop Params: 'hidden'
// Potential Hook Name: 'useHidden'

// Current:
<Hidden.Container>
  {hidden => (
    <Group>
      <Hidden.Toggle as={Button} {...hidden}>Toggle</Hidden.Toggle>
      <Hidden {...hidden}>Hidden</Hidden>
    </Group>
  )}
</Hidden.Container>

// New:
const hidden = useHidden();

return (
  <Group>
    <Hidden.Toggle as={Button} {...hidden}>Toggle</Hidden.Toggle>
    <Hidden {...hidden}>Hidden</Hidden>
  </Group>
)

overlay.jsx

// <Overlay />
// Render Prop Params: 'overlay'
// Potential Hook Name: 'useOverlay'

// Current:
<Overlay.Container>
  {overlay => (
    <Block>
      <Button as={Overlay.Show} {...overlay}>Click me</Button>
      <Overlay fade slide {...overlay}>Overlay</Overlay>
    </Block>
  )}
</Overlay.Container>

// New
const overlay = useOverlay();

<Block>
  <Button as={Overlay.Show} {...overlay}>Click me</Button>
  <Overlay fade slide {...overlay}>Overlay</Overlay>
</Block>

popover.jsx

// <Popover />
// Render Prop Params: 'popover'
// Potential Hook Name: 'usePopover'

// Current:
<Popover.Container>
  {popover => (
    <InlineBlock relative>
      <Button as={Popover.Toggle} {...popover}>
        Toggle
      </Button>
      <Popover fade slide expand hideOnClickOutside {...popover}>
        <Popover.Arrow />
        Click outside to hide
      </Popover>
    </InlineBlock>
  )}
</Popover.Container>

// New:
const popover = usePopover();

<InlineBlock relative>
  <Button as={Popover.Toggle} {...popover}>
    Toggle
  </Button>
  <Popover fade slide expand hideOnClickOutside {...popover}>
    <Popover.Arrow />
    Click outside to hide
  </Popover>
</InlineBlock>

sidebar.jsx

// <Sidebar />
// Render Prop Params: 'sidebar'
// Potential Hook Name: 'useSidebar'

// Current:
<Sidebar.Container>
  {sidebar => (
    <Block>
      <Button as={Sidebar.Show} {...sidebar}>
        Open sidebar
      </Button>
      <Backdrop fade as={Sidebar.Hide} {...sidebar} />
      <Sidebar slide {...sidebar}>Sidebar</Sidebar>
    </Block>
  )}
</Sidebar.Container>

// New:
const sidebar = useSidebar();

return (
  <Block>
    <Button as={Sidebar.Show} {...sidebar}>
      Open sidebar
    </Button>
    <Backdrop fade as={Sidebar.Hide} {...sidebar} />
    <Sidebar slide {...sidebar}>Sidebar</Sidebar>
  </Block>
)

step.jsx

// <Step />
// Render Prop Params: 'step'
// Potential Hook Name: 'useStep'

// Current:
<Step.Container initialState={{ current: 0 }}>
  {step => (
    <Block>
      <Group>
        <Button as={Step.Previous} {...step}>Previous</Button>
        <Button as={Step.Next} {...step}>Next</Button>
      </Group>
      <Step step="Step 1" {...step}>Step 1</Step>
      <Step step="Step 2" {...step}>Step 2</Step>
    </Block>
  )}
</Step.Container>

// New:
const step = useStep();

return (
  <Block>
    <Group>
      <Button as={Step.Previous} {...step}>Previous</Button>
      <Button as={Step.Next} {...step}>Next</Button>
    </Group>
    <Step step="Step 1" {...step}>Step 1</Step>
    <Step step="Step 2" {...step}>Step 2</Step>
    <Step step="Step 3" {...step}>Step 3</Step>
  </Block>
)

tabs.jsx

// <Tabs />
// Render Prop Params: 'step'
// Potential Hook Name: 'useStep'

// Current:
<Tabs.Container>
  {tabs => (
    <Block>
      <Tabs>
        <Tabs.Tab tab="first" {...tabs}>First</Tabs.Tab>
        <Tabs.Tab tab="second" {...tabs}>Second</Tabs.Tab>
      </Tabs>
      <Tabs.Panel tab="first" {...tabs}>First</Tabs.Panel>
      <Tabs.Panel tab="second" {...tabs}>Second</Tabs.Panel>
    </Block>
  )}
</Tabs.Container>

// New:
const tabs = useTabs();

return (
  <Block>
    <Tabs>
      <Tabs.Tab tab="first" {...tabs}>First</Tabs.Tab>
      <Tabs.Tab tab="second" {...tabs}>Second</Tabs.Tab>
    </Tabs>
    <Tabs.Panel tab="first" {...tabs}>First</Tabs.Panel>
    <Tabs.Panel tab="second" {...tabs}>Second</Tabs.Panel>
  </Block>
)