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