https://github.com/jhta/react-use-theme

React Hook for consume styled component `theme`
https://github.com/jhta/react-use-theme

hooks react styled-components styled-system

Last synced: 8 days ago
JSON representation

React Hook for consume styled component `theme`

• Host: GitHub
• URL: https://github.com/jhta/react-use-theme
• Owner: jhta
• Created: 2019-02-11T15:24:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-11T15:53:25.000Z (almost 6 years ago)
• Last Synced: 2024-11-19T03:11:35.278Z (about 2 months ago)
• Topics: hooks, react, styled-components, styled-system
• Language: JavaScript
• Size: 5.86 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-use-theme

React Hook for consume Styled Component `theme`

## Install

`yarn add react-use-theme`

## How to use it? 

Get any attribute from theme in React Components

````jsx

  const myColor = useTheme('colors.myColor')

````

Example

````jsx

import React from 'react'

import styled, { ThemeProvider } from 'styled-components'

import useTheme from 'react-use-theme'

const theme = {

  colors: {

    myCustomColor: '#07c'

  }

}

// You have to provide a Context theme

const App = () => {

  return (

    

        

    

  )

}

// then you can access to theme with useTheme hook

const MyComponent = () => {

  const titleColor = useTheme('colors.myCustomColor')

  

  // you can pass default values

  const defaultColor = 'red'

  const subtitleColor = useTheme('colors.anotherColor', defaultColor)

  

  return (

    


      Hello World

    

  )


}

const Title = styled.h1`

  color: ${p => p.color};

`

````