Description
Create complex and nice Flexbox-based layouts, without even knowing what flexbox means.
Nice React Layout alternatives and similar libraries
Based on the "UI Components" category.
Alternatively, view Nice React Layout alternatives based on common mentions on social networks and blogs.
-
Swiper
Most modern mobile touch slider with hardware accelerated transitions -
react-beautiful-dnd
Beautiful and accessible drag and drop for lists with React -
sortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required. -
slate
A completely customizable framework for building rich text editors. (Currently in beta.) -
react-virtualized
React components for efficiently rendering large lists and tabular data -
react-table
π€ Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table -
sweetalert2
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. -
Mantine
React components library with native dark theme support -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
react-window
React components for efficiently rendering large lists and tabular data -
react-map-gl
React friendly API wrapper around MapboxGL JS -
react-dates
An easily internationalizable, mobile-friendly datepicker library for the web -
react-content-loader
βͺ SVG-Powered component to easily create skeleton loadings. -
react-sortable-hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable listβοΈ -
react-color
:art: Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more -
downshift π
π A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. -
AG Grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript. -
react-dropzone
Simple HTML5 drag-drop zone with React.js. -
react-datepicker
A simple and reusable datepicker component for React -
victory
A collection of composable React components for building interactive data visualizations -
react-big-calendar
gcal/outlook like calendar component -
react-text-mask
Input mask for React, Angular, Ember, Vue, & plain JavaScript -
react-data-grid
Feature-rich and customizable data grid React component -
react-player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion -
react-pdf
Display PDFs in your React app as easily as if they were images. -
google-map-react
Google map library for react that allows rendering components as markers :tada: -
react-draft-wysiwyg
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg -
react-chartjs-2
React components for Chart.js, the most popular charting library -
lightGallery
A customizable, modular, responsive, lightbox gallery plugin. -
react-autosuggest
WAI-ARIA compliant React autosuggest component -
react-lazyload
Lazy load your component, image or anything matters the performance. -
react-day-picker
DayPicker is a customizable date picker component for React, with native TypeScript support. -
react-burger-menu
:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Nice React Layout or a related project?
README
[logo](public/logo.png) Nice React Layout
A set of React components to create complex flexbox-based layouts without knowing what flexbox is. https://ekros.github.io/nice-react-layout/
Installation
yarn add nice-react-layout
Motivation
The aim of this project is to have a reduced set of components to create flexbox-based layouts abstracting the knowledge needed to understand how flexbox works. This library is very useful for web apps with lots of panels.
Features
- Easy to learn: Just combine layouts and panels.
- Create collapsible sidebars with ease.
- Automagically colorize panels with random colors to speed-up prototyping.
- Resizable panels. Just add separators to your layouts.
- Swap panels position using Drag and drop!
Basic Usage
Components can be imported using ES6 modules syntax:
import {
HorizontalLayout,
VerticalLayout,
Panel,
Separator,
Spacer,
View
} from "nice-react-layout";
Creating a simple layout is as easy as this:
<HorizontalLayout mockup>
<Panel />
<Panel />
</HorizontalLayout>
It renders an horizontal layout with two panels of the same size (they have proportion=1 by default). Thanks to the 'mockup' prop it paints every panel with a random color, easing the layout prototyping process. Layouts get all the available space by default (in the parent element). If you want your layout to fill the viewport you can use the component. Like this:
<View>
<HorizontalLayout mockup>
<Panel />
<Panel />
</HorizontalLayout>
</View>
In both horizontal and vertical layouts add the prop 'proportion' with the proportional part it takes from the available space. This example creates a typical sidebar + content layout:
<HorizontalLayout mockup>
<Panel proportion={1} />
<Panel proportion={4} />
</HorizontalLayout>
Do you want to add a separator between both panels? Use the Separator component:
<HorizontalLayout mockup>
<Panel proportion={1} />
<Separator />
<Panel proportion={4} />
</HorizontalLayout>
You can nest layouts. Let's add a vertical layout, with its own Separator, inside the right panel:
<HorizontalLayout mockup>
<Panel proportion={1} />
<Separator />
<Panel proportion={4}>
<VerticalLayout mockup>
<Panel />
<Separator />
<Panel />
</VerticalLayout>
</Panel>
</HorizontalLayout>
To enable drag-and-drop feature, use the draggable
and droppable
props:
<HorizontalLayout mockup>
<Panel draggable droppable />
<Panel draggable droppable />
</HorizontalLayout>
For a complete example with every feature, see the src/demo/App.js file. Or just run yarn start
.
Components
View
The top-level component. It gets all the available viewport space. Use it if you want your layout to fill the viewport or pass width / height props.
Props
Prop | Description |
---|---|
width | view width (100vw by default) |
height | view height (100vh by default) |
HorizontalLayout
It creates an horizontal layout. This is shorthand component for:
<Layout orientation="horizontal" />
VerticalLayout
It creates vertical layout layout. This is a shorthand component for:
<Layout orientation="vertical" />
Layout
Creates a layout.
Props
Prop | Description |
---|---|
className | Top-level element class name |
collapseSize | Collapsible panels size when collapsed |
customCss | Custom layout CSS object |
mockup | Render in mockup mode |
onResize | Returns (layout, collapsedPanels) on resize |
orientation | 'vertical' or 'horizontal' |
reverse | Render layout in reverse order |
Panel
Here is where your content goes. If you are familiar with flexbox, this is like a "flex item" with a flex value of 1 by default. If not, don't worry, you don't need to know that :)
Props
Prop | Description |
---|---|
centered | Center panel content |
className | Top-level element class name |
collapsible | The panel can be collapsed |
collapsed | Is the panel collapsed? |
collapseButtonClass | Adds a class to the collapse button |
collapseButtonContent | A String or element |
collapseButtonCollapsedContent | A String or element |
collapseButtonStyle | Inject inline CSS to the collapse button |
collapsePanel | Called when collapse button is clicked |
collapseSwitch | Custom collapse element (renders button if not provided) |
columns | Number of columns (uses CSS multiple columns) |
customCss | Custom panel CSS object (injects it as an inline style) |
draggable | Enable dragging |
droppable | Other panels can be dropped here |
minHeight | Minimum panel height |
minWidth | Minimum panel width |
mockup | Render in mockup mode |
orientation | 'vertical' or 'horizontal' |
proportion | Proportion it uses from the available space (default = 1) |
reverse | Render layout in reverse order |
showSize | Show panel size while dragging adjacent separators |
sidebar | Don't do much by it self. It is a requirement for sidebar props like 'collapsible' |
Separator
It separates panels and allows them to be resized. This is optional.
Props
Prop | Description |
---|---|
customCss | Custom separator CSS object (injects it as an inline style) |
defaultDblClickPos | Position where the separator goes when double-clicked |
disabled | Is disabled? |
onSeparatorDoubleClick | Action called when the separator is double-clicked |
onSeparatorMouseDown | Action called when the mouse is over the separator |
Spacer
It renders a blank space. Useful when you need to leave spaces between panels.
Props
Prop | Description |
---|---|
size | Separator size in pixels |
Like this project? β us on Github :)
*Note that all licence references and agreements mentioned in the Nice React Layout README section above
are relevant to that project's source code only.