Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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)`

About

Generate class names for fela style rule and apply them as property on a wrapped component

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.