Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 days ago
JSON representation
A collection of utility functions to use with `styled-components`, make writing component with SC more fascinating.
- Host: GitHub
- URL: https://github.com/chengjianhua/styled-fns
- Owner: chengjianhua
- License: mit
- Created: 2018-04-16T14:26:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-08-27T07:27:49.000Z (about 6 years ago)
- Last Synced: 2024-10-14T03:06:45.595Z (about 1 month ago)
- Topics: styled, styled-components, utility
- Language: JavaScript
- Size: 24.4 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
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]
[](#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