styled-components#503 added useTheme hook documentation (styled-compo…

…nents#569)

* feat: add useTheme hook in helper api section

* chore: add tag to the header

* chore: change useContext mention to useTheme on Theming section

* chore: add useContext metion again

Co-authored-by: Ayoub Aabass <ayoub@aabass.net>
Co-authored-by: Evan Jacobs <570070+probablyup@users.noreply.github.com>

sections/advanced/theming.md

@@ -97,30 +97,45 @@ If you ever need to use the current theme outside styled components (e.g. inside
 the `withTheme` higher order component.
 
 ```jsx
-import { withTheme } from 'styled-components';
+import { withTheme } from 'styled-components'
 
 class MyComponent extends React.Component {
   render() {
-    console.log('Current theme: ', this.props.theme);
+    console.log('Current theme: ', this.props.theme)
     // ...
   }
 }
 
-export default withTheme(MyComponent);
+export default withTheme(MyComponent)
 ```
 
 #### via `useContext` React hook | v4
 
 You can also use `useContext` to access the current theme outside of styled components when working with React Hooks.
 
 ```jsx
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
+import { useContext } from 'react'
+import { ThemeContext } from 'styled-components'
 
 const MyComponent = () => {
-  const themeContext = useContext(ThemeContext);
+  const themeContext = useContext(ThemeContext)
 
-  console.log('Current theme: ', themeContext);
+  console.log('Current theme: ', themeContext)
+  // ...
+}
+```
+
+#### via `useTheme` custom hook | v5
+
+You can also use `useTheme` to access the current theme outside of styled components when working with React Hooks.
+
+```jsx
+import { useTheme } from 'styled-components'
+
+const MyComponent = () => {
+  const theme = useTheme()
+
+  console.log('Current theme: ', theme)
   // ...
 }
 ```

sections/api/helpers/index.md

@@ -5,6 +5,7 @@ import WithTheme from './with-theme.md'
 import CreateGlobalStyle from './create-global-style.md'
 import ThemeConsumer from './theme-consumer.md'
 import StyleSheetManager from './style-sheet-manager.md'
+import UseTheme from './use-theme.md'
 
 ## Helpers
 
@@ -20,4 +21,6 @@ import StyleSheetManager from './style-sheet-manager.md'
 
 <WithTheme />
 
+<UseTheme />
+
 <ThemeConsumer />

sections/api/helpers/use-theme.md

@@ -0,0 +1,16 @@
+### `useTheme` | v5
+
+This is a custom hook to get the current theme from a `ThemeProvider`.
+
+```jsx
+import { useTheme } from 'styled-components'
+
+function MyComponent() {
+  const theme = useTheme()
+  console.log('Current theme: ', theme)
+
+  // ...
+}
+```
+
+> All styled components [automatically receive the theme as a prop](/docs/advanced#theming), so this is only necessary if you wish to access the theme for other reasons.