Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chengjianhua/styled-fns

A collection of utility functions to use with `styled-components`, make writing component with SC more fascinating.
https://github.com/chengjianhua/styled-fns

styled styled-components utility

Last synced: about 2 months ago
JSON representation

A collection of utility functions to use with `styled-components`, make writing component with SC more fascinating.

Awesome Lists containing this project

README 

        


styled-fns



A collection of utility functions to use with `styled-components`, make writing component with SC more fascinating.








[![Build Status][build-badge]][build]

[![Code Coverage][coverage-badge]][coverage]

[![version][version-badge]][package]

[![downloads][downloads-badge]][npmtrends]

[![MIT License][license-badge]][license]



[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

[![PRs Welcome][prs-badge]][prs]

[![Code of Conduct][coc-badge]][coc]



[![Watch on GitHub][github-watch-badge]][github-watch]

[![Star on GitHub][github-star-badge]][github-star]

[![Tweet][twitter-badge]][twitter]



## Table of Contents



* [Installation](#installation)

* [Usage](#usage)

* [API](#api)

* [Inspiration](#inspiration)

* [More features](#more-features)

* [Contributors](#contributors)

* [LICENSE](#license)



## Installation



This module is distributed via [npm][npm] which is bundled with [node][node] and

should be installed as one of your project's `dependencies`:



```

npm install --save styled-fns

```



## Usage



```javascript

import {variants} from 'styled-fns'



const getColor = variants({

  primary: 'blue',

  secondary: 'violet',

  danger: 'red',

})

```



This library is shipped as an ESM bundle, importing only the function you need could help reduce the size of your bundle.



## API



See details in [API Documentation](./other/docs/API.md).



## Inspiration



A few utilities are inspired by other fascinating libraries:



* `variants` is inspired by [styled-theming](https://github.com/styled-components/styled-theming).



And the idea of creating this library is inspired by [react-fns](https://github.com/jaredpalmer/react-fns), we have the similar name obviously 🤷‍.



## More features



I'm not aware of any, if you are please [make a pull request][prs] and add it

here!



## Contributors



Thanks goes to these people ([emoji key][emojis]):



| [
Jianhua Cheng](https://chengjianhua.github.io)
[💻](https://github.com/chengjianhua/styled-fns/commits?author=chengjianhua "Code") [📖](https://github.com/chengjianhua/styled-fns/commits?author=chengjianhua "Documentation") [🚇](#infra-chengjianhua "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/chengjianhua/styled-fns/commits?author=chengjianhua "Tests") |

| :---: |



This project follows the [all-contributors][all-contributors] specification.

Contributions of any kind welcome!



## LICENSE



MIT



[npm]: https://www.npmjs.com/

[node]: https://nodejs.org

[build-badge]: https://img.shields.io/travis/chengjianhua/styled-fns.svg?style=flat-square

[build]: https://travis-ci.org/chengjianhua/styled-fns

[coverage-badge]: https://img.shields.io/codecov/c/github/chengjianhua/styled-fns.svg?style=flat-square

[coverage]: https://codecov.io/github/chengjianhua/styled-fns

[version-badge]: https://img.shields.io/npm/v/styled-fns.svg?style=flat-square

[package]: https://www.npmjs.com/package/styled-fns

[downloads-badge]: https://img.shields.io/npm/dm/styled-fns.svg?style=flat-square

[npmtrends]: http://www.npmtrends.com/styled-fns

[license-badge]: https://img.shields.io/npm/l/styled-fns.svg?style=flat-square

[license]: https://github.com/chengjianhua/styled-fns/blob/master/LICENSE

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

[prs]: http://makeapullrequest.com

[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square

[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square

[coc]: https://github.com/chengjianhua/styled-fns/blob/master/other/CODE_OF_CONDUCT.md

[github-watch-badge]: https://img.shields.io/github/watchers/chengjianhua/styled-fns.svg?style=social

[github-watch]: https://github.com/chengjianhua/styled-fns/watchers

[github-star-badge]: https://img.shields.io/github/stars/chengjianhua/styled-fns.svg?style=social

[github-star]: https://github.com/chengjianhua/styled-fns/stargazers

[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20styled-fns%20by%20%40chengjianhua%20https%3A%2F%2Fgithub.com%2Fchengjianhua%2Fstyled-fns%20%F0%9F%91%8D

[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/chengjianhua/styled-fns.svg?style=social

[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key

[all-contributors]: https://github.com/kentcdodds/all-contributors