Skip to content

Commit

Permalink
Add react-sticky use case
Browse files Browse the repository at this point in the history
  • Loading branch information
codepunkt committed Feb 23, 2017
1 parent 7316ab1 commit 4046d1e
Showing 1 changed file with 27 additions and 0 deletions.
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ const Component = styledProperty(WrappedComponent, 'propName')`
`
```
## 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'
Expand All @@ -38,3 +42,26 @@ 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;
`
```

0 comments on commit 4046d1e

Please sign in to comment.