@savignano/use-flex NPM

Use component props to define flex css.

use-flex is a JavaScript library for styling user interfaces.

Declarative: Define the styles you need and enjoy the benefit of cached css without the cost of inline style redefinition.
Flexible: No pun intended. Props that do not have css definitions will be inline styled. You may also pass a style prop. Have a className you'd like incorporated? Pass in a className prop and have it concatenated.
Powerful: Have your own css classes? Pass a customMapping object and serve your own css with component props.

Installation

npm install @savignano/use-flex

Usage

Here is an example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import useFlex from '@savignano/use-flex';

function Section({ children, ...rest }) {
  const { className, style } = useFlex(rest)
  return (
    <section className={className} style={style}>
      {children}
    </section>
  )
}

function App() {
  return (
    <Section alignItems="center" flexFlow="row wrap" justifyContent="center">
      <p>This</p>
      <p>content</p>
      <p>is horizontal</p>
    </Section>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));