add support for hooks

[Tsugami]

I would like to create separate components with CollapseHeader and CollapsedBody, without the need to do dirty props, I think hooks improve the experience and would make the code cleaner.

example without hook:

// parent component should have a useState to dirty props
function Header({ title, isExpanded }: Props) {
  return (
    <CollapseHeader>
      <TitleHeader>
        <Title>{title}</Title>
        <Feather name={isExpanded ? 'chevron-down' : 'chevron-up'} size={15} color='#fff' />
      </TitleHeader>
    </CollapseHeader>
  );
}

function Example() {
  const [isExpanded, setExpanded] = React.useState(true);

  return (
    <Collapse isExpanded={isExpanded} onToggle={() => setExpanded(!isExpanded)}>
      <Header title="Hello" isExpanded={isExpanded} />
      { /* ... */ }
    </Collapse>
  );
}

example with hook:

function Header({ title }: Props) {
  const { isExpanded } = useCollapse();

  return (
    <CollapseHeader>
      <TitleHeader>
        <Title>{title}</Title>
        <Feather name={isExpanded ? 'chevron-down' : 'chevron-up'} size={15} color='#fff' />
      </TitleHeader>
    </CollapseHeader>
  );
}

function Example() {
  return (
    <Collapse>
      <Header title="Hello" />
      { /* ... */ }
    </Collapse>
  );
}