https://github.com/codepunkt/fela-react-prop

Generate class names for fela style rule and apply them as property on a wrapped component
https://github.com/codepunkt/fela-react-prop

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/codepunkt/fela-react-prop
• Owner: codepunkt
• Created: 2017-05-01T15:46:50.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-03T09:10:20.000Z (about 8 years ago)
• Last Synced: 2024-11-09T20:07:44.432Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 33.2 KB
• Stars: 7
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# fela-react-prop

[![npm version](https://badge.fury.io/js/fela-react-prop.svg)](https://badge.fury.io/js/fela-react-prop) [![Build Status](https://travis-ci.org/codepunkt/fela-react-prop.svg?branch=master)](https://travis-ci.org/codepunkt/fela-react-prop) [![Coverage Status](https://coveralls.io/repos/github/codepunkt/fela-react-prop/badge.svg?branch=master)](https://coveralls.io/github/codepunkt/fela-react-prop?branch=master)

A HOC allowing you to specify which property to bind [`fela`](https://github.com/rofrischmann/fela) generated class names against (i.e. something other than `className`).

## Installation

```bash

yarn add fela-react-prop

```

## Usage

```javascript

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`](https://github.com/ReactTraining/react-router).

```javascript

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`](https://github.com/captivationsoftware/react-sticky).

```javascript

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

```