diff --git a/sections/advanced/theming.md b/sections/advanced/theming.md index 6c2b6074e..d316b1bc7 100644 --- a/sections/advanced/theming.md +++ b/sections/advanced/theming.md @@ -97,16 +97,16 @@ 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 @@ -114,13 +114,28 @@ export default withTheme(MyComponent); 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) // ... } ``` diff --git a/sections/api/helpers/index.md b/sections/api/helpers/index.md index 21d503087..36526fd20 100644 --- a/sections/api/helpers/index.md +++ b/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' + + diff --git a/sections/api/helpers/use-theme.md b/sections/api/helpers/use-theme.md new file mode 100644 index 000000000..2d4a78b2f --- /dev/null +++ b/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.