https://github.com/jovianhq/styled-themer

Utility function to select a theme element from a styled components theme
https://github.com/jovianhq/styled-themer

javascript react styled-components

Last synced: 6 days ago
JSON representation

Utility function to select a theme element from a styled components theme

• Host: GitHub
• URL: https://github.com/jovianhq/styled-themer
• Owner: JovianHQ
• License: mit
• Created: 2019-04-18T23:15:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-04-19T19:50:26.000Z (over 5 years ago)
• Last Synced: 2024-04-24T19:24:07.825Z (7 months ago)
• Topics: javascript, react, styled-components
• Language: JavaScript
• Homepage: https://npmjs.com/styled-themer
• Size: 30.3 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# styled-themer

Utility function to select a theme element from a styled components theme

## Installation

```

npm i styled-themer

```

## Usage

The simplest way to use `styled-themer` is via the default import `t`, which can be used to select a particular theme element as follows:

```javascript

import styled from "styled-components";

import t from "styled-themer";

// Normal way

const Text1 = styled.span`

  color: ${props => props.theme.color.primary};

`;

// Using styled-themer

const Text2 = styled.span`

  color: ${t("color", "primary")};

`;

```

Apart from this, there are also shorthands `color`, `bgColor` and `fontSize` to further reduce the amount of code required.

```javascript

import styled from "styled-components";

import { color, bgColor, fontSize } from "styled-themer";

// Normal way

const Wrapper = styled.div`

  color: ${props => props.theme.color.primary};

  background-color: ${props => props.theme.color.background};

  font-size: ${props => props.theme.fontSize.normal};

`;

// Using styled-themer

const Wrapper22 = styled.span`

  ${color("primary")};

  ${bgColor("background")};

  ${fontSize("normal")};

`;

```

`color` and `bgColor` select the given key from `theme.color`, and add the CSS property (`color:` and `background-color:`) as a prefix.