React higher order component - adds style related props to wrapped components
Last updated 3 years ago by ambewas .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-style-hoc 
SYNC missed versions from official npm registry.


yarn add react-style-hoc

or if you prefer npm:

npm install --save react-style-hoc

[motivation] Why would I want to compose styles with functions...?!

Great question!

The purpose of this repository is to allow you to declare styles as functions, that are composable, and return a react Higher Order Component.

The direct benefit of which is that it becomes possible to create reusable HOCs for styling.

This is probably not very useful for 'looks-and-feel' styles (everything 'inside the component box') - but more for things that have to do with positioning. Separating those two concerns is a good idea in any case, and this provides you with a tool to do so.

A simple example would be to define a flex centerer, which would look something like this:

const MyComponent = ({style}) => <div style={style}>unstyled</div>

const isFlexBox = createStyleHoc('display', 'flex');
const centersChidren = createStyleHoc({alignItems: 'center', justifyContent: 'center'}, '');

const isFlexCenterer = compose(

When using isFlexCenterer on it's own as a wrapper around MyComponent, like this:...

export isFlexCenterer(MyComponent);

the style prop of MyComponent then looks like this:

  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',

Of course, the power of composing styles only becomes fully clear once you start composing different helpers.

You can compare this to using mixins in a CSS preprocessor such as SASS or LESS.

const isFullyStyled = compose(

This is a very young library, and contributions very welcome!


yarn install

npm run watch:js

run tests: npm test


run our example app

How to use:

import React, { Component } from 'react';
import { withPadding, withMargin, compose, createStyleHoc } from 'react-style-hoc';

Compose styles with our default provided style HOCs

const withPaddingAndMargin = compose(

... or create your own style HOCS using createStyleHoc:

Pass a string (style key). Everything here is curried, so if no default value is provided, you still have to call withColor with a value -> see usage in withAllStyles

const withColor = createStyleHoc('color');

Pass style key & value as arguments:

const withSomeRandomStyleAsArguments = createStyleHoc('display', 'flex');

Pass an object with default styles applied:

Note: we need that second argument. We still need figure out how to get rid of that. Should we even expose this kind of API? Thoughts are welcome.

const withSomeRandomStyleAsObject = createStyleHoc({
  background: 'purple',
}, '');

Compose all previously made styles into one!

const withAllStyles = compose(

Use the hoc on your stateless components:

Note: you can still provide some other default style as a prop, the HOC styles will be applied after -- so its possible to override everything. E.g. if we would have provided {padding: '1px'}, then withPadding(20) from before would not have any effect.

const TestStateless = ({ children, style }) => <div style={style}>{children}</div>
const Styled = withAllStyles(TestStateless);

class App extends Component {
  render() {
    return (
      <div className="App">
        <Styled style={{border: '1px solid red'}}>
          <div>with padding, composed with margin</div>

export default App;


Please see our guidelines in if you want to contribute something to this library.


MIT Licensed. Copyright (c) Kevin Decock 2017.

Current Tags

  • 0.1.0                                ...           beta (3 years ago)
  • 0.3.4                                ...           latest (3 years ago)

11 Versions

  • 0.3.4                                ...           3 years ago
  • 0.3.3                                ...           3 years ago
  • 0.3.2                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 7
Last Day 0
Last Week 0
Last Month 17
Dependencies (2)
Dependents (0)

Copyright 2014 - 2016 © |