Reactrix Flex

Lightweight Flex Component For React

Install

npm install --save reactrix-flex
yarn add reactrix-flex

Usage

import React, { Component } from 'react'
import ReactrixFlex from 'reactrix-flex'

class Flex extends Component {
  render () {
    const options = {
      breakPoints: [ 640, 900, 1200 , 1400],
      rowItems: [ 2, 3, 4, 5]
    }
    return (
      <ReactrixFlex {...options}>
        <div>Flex Item</div>
        <div>Flex Item</div>
      </ReactrixFlex>
    )
  }
}

Features

• Only two peer depencies (react/prop-types) ✔️
• Works great on all devices/browsers ✔️
• Easy to use BEM class hooks ✔️

Examples

• Demo - https://alexcasche.github.io/reactrix-flex/
• Sandbox - https://codesandbox.io/s/jlzno327x9

Props

Prop	Type	Default	Description: Options
breakPoints	array	[ 600, 900, 1280]	Screen width: number
rowItems	array	[ 2, 3, 4 ]	Item count: number

Classes

Class	Description
.flex	Outer component wrapper
.flex__cotainer	Inner component wrapper
.flex__item	Item outer wrapper
.flex__content	Item inner wrapper

Development

Follow these steps to setup a local development environment. Use yarn or npm - not both.

1. Clone the repo from Github

git clone https://github.com/alexcasche/react-sidebar

2. Setup project & start rollup watch

npm install && npm start
yarn install && yarn add

3. Setup react app & start dev server

cd example
npm install && npm start
yarn install && yarn start

Shoutout

Interested in publishing your own packages? Checkout create-react-library 🙌

License

MIT © alexcasche