Generate class names for fela style rule and apply them as property on a wrapped component
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.babelrc
.coveralls.yml
.editorconfig
.gitignore
.travis.yml
README.md
index.js
index.test.js
package.json
yarn.lock

README.md

fela-react-prop

npm version Build Status Coverage Status

A HOC allowing you to specify which property to bind fela generated class names against (i.e. something other than className).

Installation

yarn add fela-react-prop

Usage

import React from 'react'
import { addPropertyStyles } from 'fela-react-prop'

// apply the style classes generated for a style rule to the "propName"
// property of the wrapped component (WrappedComponent).
const StyledLink = addPropertyStyles('propName', props => ({
  display: 'block',
}), WrappedComponent)

Use Cases

react-router Link

Set default and active styles of Link component from react-router.

import { NavLink } from 'react-router-dom'
import { addPropertyStyles } from 'fela-react-prop'

// apply the style classes generated for a style rule to the "activeClassName"
// property of the wrapped component (NavLink).
const StyledLink = addPropertyStyles('activeClassName', () => ({
  color: '#bada55',
}), NavLink)`

react-sticky Sticky

Set default and sticky styles of Sticky component from react-sticky.

import { Sticky } from 'react-sticky'
import { addPropertyStyles } from 'fela-react-prop'

// apply the style classes generated for a style rule to the "stickyClassName"
// property of the wrapped component (Sticky).
const StyledLink = addPropertyStyles('stickyClassName', () => ({
  marginTop: '16px',
}), Sticky)`