Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leefsmp/Re-Flex
Resizable Flex layout container components for advanced React web applications
https://github.com/leefsmp/Re-Flex
flex layout react react-components resizable responsive
Last synced: 13 days ago
JSON representation
Resizable Flex layout container components for advanced React web applications
- Host: GitHub
- URL: https://github.com/leefsmp/Re-Flex
- Owner: leefsmp
- License: mit
- Created: 2016-12-21T06:49:31.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-10T22:22:34.000Z (8 months ago)
- Last Synced: 2024-10-05T23:52:38.665Z (about 1 month ago)
- Topics: flex, layout, react, react-components, resizable, responsive
- Language: JavaScript
- Homepage: https://leefsmp.github.io/Re-Flex/index.html
- Size: 7.91 MB
- Stars: 633
- Watchers: 16
- Forks: 73
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-components - react-reflex - Flex layout container component for advanced React web applications. (UI Layout / Form Components)
- awesome-react - react-reflex - Flex layout container component for advanced React web applications.  (UI Components / Layout)
- awesome-list - react-reflex - Flex layout container component for advanced React web applications. (Soluções / Form Components)
- awesome-react-components - react-reflex - Flex layout container component for advanced React web applications. (UI Layout / Form Components)
- awesome-react-components - react-reflex - Flex layout container component for advanced React web applications. (UI Layout / Form Components)
- awesome-react-components - react-reflex - Flex layout container component for advanced React web applications. (UI Layout / Form Components)
- best-of-react - GitHub - 10% open · ⏱️ 10.03.2024): (Layout)
- fucking-awesome-react-components - react-reflex - Flex layout container component for advanced React web applications. (UI Layout / Form Components)
README
# 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:
 |  |  |  |  | 
--- | --- | --- | --- | --- | --- |
IE 11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
## Documentation & Samples
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 ...](https://leefsmp.github.io/Re-Flex/index.html)
* Supported properties on `ReflexContainer`:
* `orientation`: Orientation of the layout container.
Type: `oneOf(['horizontal', 'vertical'])`.
Default value: `horizontal`.
* `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.
Type: `number`.
Default value: `100`.
* `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.
Type: `bool`.
Default value: `false`.
* `className`: Space separated classnames to apply custom styles on the component. Type: `string`.
Default value: `empty string ''`.
* `style`: allows passing inline style to the container.
Type: `object`.
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](https://leefsmp.github.io/Re-Flex/index.html#demo7) for more details.
Type: `bool`.
Default value: `false`.
* `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.
Type: `number`.
Default value: `100`.
* `resizeHeight`: Allows to control if `height` will be propagated when `propagateDimensions={true}`.
Type: `bool`.
Default value: `true`.
* `resizeWidth`: Allows to control if `width` will be propagated when `propagateDimensions={true}`.
Type: `bool`.
Default value: `true`.
* `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](https://leefsmp.github.io/Re-Flex/index.html#demo6) for more details.
Type: `number`.
Default value: `true`.
* `minSize`: Creates a constraint on the minimum size in pixel to which the element can be resized to by the user.
Type: `number`.
Default value: `true`.
* `maxSize`: Creates a constraint on the maximum size in pixel to which the element can be resized to by the user.
Type: `number`.
Default value: `true`.
* `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.
Type: `number`.
Default value: `true`.
* `direction`: Allows to control in which direction(s) the element will shrink/expand when its `size` property is modified. See [Controlled elements demo](https://leefsmp.github.io/Re-Flex/index.html#demo6) for more details.
Type: `-1, 1 or [-1, 1]`.
Default value: `1`.
* `onStartResize`: Event fired when user initiates layout resizing.
Type: `function({domElement, component})`.
Default value: `undefined`.
* `onStopResize`: Event fired when user finishes layout resizing.
Type: `function({domElement, component})`.
Default value: `undefined`.
* `onResize`: Event fired at each resize step when user resizes layout.
Type: `function({domElement, component})`.
Default value: `undefined`.
* `className`: Space separated classnames to apply custom styles on the component.
Type: `string`.
Default value: `empty string ''`.
* `style`: allows passing inline style to the container.
Type: `object`.
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.
Type: `bool`.
Default value: `false`.
* `onStartResize`: Event fired when user initiates layout resizing.
Type: `function({domElement, component})`.
Default value: `undefined`.
* `onStopResize`: Event fired when user finishes layout resizing.
Type: `function({domElement, component})`.
Default value: `undefined`.
* `onResize`: Event fired at each resize step when user resizes layout.
Type: `function({domElement, component})`.
Default value: `undefined`.
* `className`: Space separated classnames to apply custom styles on the component.
Type: `string`.
Default value: `empty string ''`.
* `style`: allows passing inline style to the container.
Default value: `{}`.
Type: `object`.
## 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 + webpack watch)
## Web Applications using Re-F|ex
[See here...](./webapps-using-reflex.md)
(Feel free to add your own by submitting a pull request...)
## About the Author
[https://twitter.com/F3lipek](https://twitter.com/F3lipek)