About Re-F|ex

Re-F|ex is a React flex-based layout component library which I created because none of the components I found out there could satisfy my requirements.

It intends to address in a simple way the needs of advanced React Web applications that require resizable layouts.

Here is a basic demo:

``js import ReactDOM from 'react-dom' import React from 'react'

import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex'

import 'react-reflex/styles.css'

///////////////////////////////////////////////////////// // Basic vertical re-flex layout with splitter // Adding a splitter between two ReflexElements // will allow the user to resize them // ///////////////////////////////////////////////////////// class ReflexDemo extends React.Component {

render () {

return (


            Left Pane (resizeable)


        
        
        
          

            Right Pane (resizeable)
          

        
      
    )
  }
}

ReactDOM.render( , document.getElementById('reflex-demo'))`

`Installation`

`sh npm install react-reflex`

ES6, CommonJS, and UMD builds are available with each distribution.

`js // You will need to import the styles separately // You probably want to do this just once during the bootstrapping phase of your application. import 'react-reflex/styles.css'

// then you can import the components import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex'`

You can also use the UMD build`html`

`React Support`

React >= 0.13.x

`Browser Support`

Re-F|ex is responsive, mobile friendly and has been tested on the following browsers:

* Chrome * Firefox * Safari * Opera * Edge

`Documentation & Samples`

Re-F|ex is the most powerful React layout component out there ... Don't just trust me, try it!

Click here for code samples and live demos ...

!re-flex-demo

`Development`

* Build the lib: npm run build | npm run build-dev(dev mode non-minified with source-map) * Build the demo:npm run build-demo | npm run build-demo-dev` (dev mode non-minified with source-map + watch)

About the Author

https://twitter.com/F3lipek

Web Applications using Re-F|ex

* Autodesk Forge RCDB

!forge-rcdb

* Autodesk Forge RCDB Configurator

!forge-rcdb-configurator

(Feel free to add your own by submitting a pull request...)

!re-flex