codepunkt / fela-react-prop

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

fela-react-prop

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