Implement 'useTheme' using Hooks API

Hey there! 👋

I was wondering if there are plans on implementing Hooks API for specific parts regarding context providers? This would help us to use something like useTheme() outside of context of styled components, where we’re currently using either withTheme HOC, or a render props pattern.

The implementation could probably be as simple as following:

const useTheme = (...path) => path.join(".").split(".")
  .reduce((a, c) => (a && a[c] ? a[c] : null), useContext(ThemeContext));

and it would allow us to do something like:

<Component background={useTheme('colors.blue')} />

I guess this has already been thought of, but since I couldn’t find any issue related to it, I wanted to get your opinion on it.

I’d be more than happy to do a PR including something like this, maybe under something such as styled-components/hooks for now, until 16.8 (hopefully 🤓).

[SeanRoberts]

For anyone looking for a dead simple hook while we wait for something official:

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

export default function useStyledTheme() {
  const theme = useContext(ThemeContext);
  return theme || {};
}

[kachkaev]

useTheme was added in https://github.com/styled-components/styled-components/pull/2765 by @semoal 🎉 Once a new version is released, your React components will be able to do this:

import { useTheme } from "styled-components";

export const MyNonStyledComponent = () => {
  const myBlueColor = useTheme().colors.blue;

  return <SomeJsx />;
}

This solution is a bit better than useTheme('colors.blue'), which was originally proposed in this issue. Reasons are type-safety and performance.