Flex layout component for advanced React web applications
npm install react-reflexRe-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'))
`
`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 >= 0.13.x
Re-F|ex is responsive, mobile friendly and has been tested on the following browsers:
!IE | !Chrome | !Firefox | !Opera | !Safari | !Edge
--- | --- | --- | --- | --- | --- |
IE 11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Re-F|ex is the most powerful resizeable React layout component out there ... Don't just trust me, try it!
Click here for code samples and live demos ...
* Supported properties on ReflexContainer:
* orientation: Orientation of the layout container. oneOf(['horizontal', 'vertical'])
Type: .horizontal
Default value: . maxRecDepth
* : Maximum recursion depth to solve initial flex of layout elements based on user provided values. This prevents infinite recursion in case the constraints solver cannot find suitable dimensions on the elements to satisfy initial inputs. number
Type: .100
Default value: .
* windowResizeAware: When set to true, this flag will update the layout upon a window resize event to attempt to satisfy minSize/maxSize constraints on each element. If your elements do not have those constraints, this is not needed. bool
Type: .false
Default value: .className
* : Space separated classnames to apply custom styles on the component. Type: string.empty string ''
Default value: . style
* : allows passing inline style to the container. object
Type: .{}
Default value: .
* Supported properties on ReflexElement:
* propagateDimensions: Setting this to true will propagate a dimensions {height, width} property to the children. See Size-aware element demo for more details. bool
Type: .false
Default value: .
* propagateDimensionsRate: When resizing with propagateDimensions={true}, defines the rate at which the dimensions will be updated on the child elements (in times per second). This can help improving performances when using this approach on heavy components by skipping some rerender steps during resizing. number
Type: .100
Default value: . resizeHeight
* : Allows to control if height will be propagated when propagateDimensions={true}. bool
Type: .true
Default value: .resizeWidth
* : Allows to control if width will be propagated when propagateDimensions={true}. bool
Type: .true
Default value: .
* size: Allows to control the size in pixel of an element. The main use-case is to allow to perform animations programmatically on an element (shrinking/expanding). See Controlled elements demo for more details. number
Type: .true
Default value: .
* minSize: Creates a constraint on the minimum size in pixel to which the element can be resized to by the user.number
Type: .true
Default value: .
* maxSize: Creates a constraint on the maximum size in pixel to which the element can be resized to by the user.number
Type: .true
Default value: .
* flex: Specifiy the initial flex of an element. By default all element will get evenly displayed inside a layout, unless some of them have minSize, maxSize or size specified.number
Type: .true
Default value: .
* direction: Allows to control in which direction(s) the element will shrink/expand when its size property is modified. See Controlled elements demo for more details. -1, 1 or [-1, 1]
Type: .1
Default value: .
* onStartResize: Event fired when user initiates layout resizing. function({domElement, component})
Type: .undefined
Default value: .
* onStopResize: Event fired when user finishes layout resizing. function({domElement, component})
Type: .undefined
Default value: . onResize
* : Event fired at each resize step when user resizes layout. function({domElement, component})
Type: .undefined
Default value: .
* className: Space separated classnames to apply custom styles on the component. string
Type: .empty string ''
Default value: .
* style: allows passing inline style to the container. object
Type: .{}
Default value: .
* Supported properties on ReflexSplitter:
* propagate: Propagate the drag when reszing a layout across multiple splitters. Layou must have at least 3 elements with therefore 2 splitters for this properties to be relevant. bool
Type: .false
Default value: .
* onStartResize: Event fired when user initiates layout resizing. function({domElement, component})
Type: .undefined
Default value: .
* onStopResize: Event fired when user finishes layout resizing. function({domElement, component})
Type: .undefined
Default value: . onResize
* : Event fired at each resize step when user resizes layout. function({domElement, component})
Type: .undefined
Default value: .
* className: Space separated classnames to apply custom styles on the component.string
Type: . empty string ''
Default value: .
* style: allows passing inline style to the container. {}
Default value: .object
Type: .
* Build the lib: npm run build | npm run build-dev (dev mode non-minified with source-map)npm run build-demo
* Build the demo: | npm run build-demo-dev` (dev mode non-minified with source-map + webpack watch)