https://github.com/brunobertolini/styled-by

Simple and powerful lib to handle styled props in your components
https://github.com/brunobertolini/styled-by

css css-in-js hacktoberfest props react react-native styled-components styles

Last synced: 5 days ago
JSON representation

Simple and powerful lib to handle styled props in your components

• Host: GitHub
• URL: https://github.com/brunobertolini/styled-by
• Owner: brunobertolini
• License: mit
• Created: 2017-08-01T16:35:48.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-06-19T19:23:07.000Z (over 2 years ago)
• Last Synced: 2025-01-10T01:12:09.211Z (13 days ago)
• Topics: css, css-in-js, hacktoberfest, props, react, react-native, styled-components, styles
• Language: JavaScript
• Homepage: https://codesandbox.io/s/ElvL8EKgg
• Size: 129 KB
• Stars: 134
• Watchers: 6
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: license

Awesome Lists containing this project

README

        


  



[![Build Status](https://travis-ci.org/brunobertolini/styled-by.svg?branch=master)](https://travis-ci.org/brunobertolini/styled-by) [![codecov](https://codecov.io/gh/brunobertolini/styled-by/badge.svg?branch=master)](https://codecov.io/gh/brunobertolini/styled-by?branch=master)

> Simple and powerful lib to handle styled props in your components

## Install

```

yarn add styled-by

```

## Basic usage

```js

import React from 'react';

import styled from 'styled-components';

import styledBy from 'styled-by';

const Button = styled.button`

  background: ${styledBy('background')};

  color: ${styledBy('color')};

  padding: 10px;

  border-radius: 10px;

`;

export default function App() {

  return (

    

      Ok

    

  );

}

```

## Options

Basicaly, if you use `styledBy('prop')`, it returns prop value. But, if you want do more, use options.

Options can be:

- string;

- function;

- object (and object value can be string or function)

### String

Option as string, will be applied when prop is present.

```js

const Button = styled.button`

  ${styledBy('disabled', 'background: #CCC;')}

`

```

### Function

Option as function, always will be called passing props, even if props is undefined

```js

  const Button = styled.button`

  ${styledBy('disabled', props => `background: ${props.disabled ? '#CCC' : '#FFF'};`)}

`

```

### Object String

Option as object string, will be handled by prop value

```js

const Button = styled.button`

  ${styledBy('corner', {

    rounded: `border-radius: 5px;`,

    circle: `border-radius: 100px;`

  })}

`

```

When option is a object, and styledBy don't find passed option, and if `_` option is defined as a function, call it.

```js

const Button = styled.button`

  ${styledBy('corner', {

    _: ({ corner }) => {}

    rounded: `border-radius: 5px;`,

    circle: `border-radius: 100px;`

  })}

`

```

### Object Function

Option as object function, will be handled by prop value, and call function as prop param

```js

const Button = styled.button`

  ${styledBy('kind', {

    default: ({ theme, color }) => `

      background: ${theme.colors[color].base};

      color: ${theme.colors[color].contrast};

      border: none;

    `,

    outline: ({ theme, color }) => `

      background: transparent;

      color: ${theme.colors[color].base};

      border: 1px solid ${theme.colors[color].base};

    `,

    clean: ({ theme, color }) => `

      background: transparent;

      color: ${theme.colors[color].base};

      border: none;

    `

  })}

`

```

### Options list

Instead of prop name in firts param, you can pass many options as a object

```js

const Button = styled.button`

  ${styledBy({

    disabled: `background: #CCC;`,

    corner: {

      square: 'border-radius: 0;',

      rounded: 'border-radius: 5px;',

      circle: 'border-radius: 50px;'

    }

  })}

`

```

This works like many styledBy props declarations

## License

MIT © [Bruno Bertolini](http://brunobertolini.com)