0.0.1 • Published 6 years ago

reactrix-flex v0.0.1

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

Reactrix Flex

Lightweight Flex Component For React

NPM JavaScript Style Guide Travis

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

Props

PropTypeDefaultDescription: Options
breakPointsarray[ 600, 900, 1280]Screen width: number
rowItemsarray[ 2, 3, 4 ]Item count: number

Classes

ClassDescription
.flexOuter component wrapper
.flex__cotainerInner component wrapper
.flex__itemItem outer wrapper
.flex__contentItem 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
  1. Setup project & start rollup watch
npm install && npm start
yarn install && yarn add
  1. 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