https://github.com/codepunkt/styled-property
Styled components helper that generates styles and sets the auto-generated className for them as property on a wrapped component.
https://github.com/codepunkt/styled-property
Last synced: 6 months ago
JSON representation
Styled components helper that generates styles and sets the auto-generated className for them as property on a wrapped component.
- Host: GitHub
- URL: https://github.com/codepunkt/styled-property
- Owner: codepunkt
- Created: 2017-01-15T11:40:57.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-05-13T17:12:20.000Z (over 7 years ago)
- Last Synced: 2025-05-29T21:46:34.637Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 36.1 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# styledProperty
[](https://badge.fury.io/js/styled-property) [](https://travis-ci.org/codepunkt/styled-property) [](https://coveralls.io/github/codepunkt/styled-property?branch=master)
[`styled-components`](https://github.com/styled-components/styled-components) helper that generates a set of styles and sets the auto-generated className for them as property on a wrapped component.
## Installation
```bash
npm install styled-property
```
## Usage
```javascript
import styledProperty from 'styled-property'
// auto-generates a class selector for the given css and sets it
// as "propName" property on the WrappedComponent.
const Component = styledProperty(WrappedComponent, 'propName')`
display: block;
`
```
## Use Cases
### react-router `Link`
Set default and active styles of `Link` component from [`react-router`](https://github.com/ReactTraining/react-router).
```javascript
import { Link } from 'react-router'
import styled from 'styled-components'
import styledProperty from 'styled-property'
// create basic Link styles
const BaseLink = styled(Link)`
color: #aaa;
display: inline-block;
text-decoration: none;
`
// create an additional set of style rules and set the "activeClassName"
// property of the wrapped component (BaseLink) to the auto-generated
// className for those styles.
const StyledLink = styledProperty(BaseLink, 'activeClassName')`
color: #bada55;
`
```
### react-sticky `Sticky`
Set default and sticky styles of `Sticky` component from [`react-sticky`](https://github.com/captivationsoftware/react-sticky).
```javascript
import { Sticky } from 'react-sticky'
import styled from 'styled-components'
import styledProperty from 'styled-property'
// create basic Sticky styles
const BaseSticky = styled(Sticky)`
margin-top: 0;
transition: margin-top .3s ease-in-out;
`
// create an additional set of style rules and set the "stickyClassName"
// property of the wrapped component (BaseSticky) to the auto-generated
// className for those styles.
const StyledSticky = styledProperty(BaseSticky, 'stickyClassName')`
margin-top: 16px;
`
```