AlanWei / React Sider
Lightweight Ant Design Pro like <Sider /> component integrated with Ant Design Menu.
Stars: ✭ 42
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Sider
Slendr
A responsive & lightweight (2KB gzipped) slider for modern browsers. [UNMAINTAINED]
Stars: ✭ 39 (-7.14%)
Mutual labels: component
React Native Swipeable Cards Demo
Facebook-style swipeable cards with React Native Interactable.
Stars: ✭ 36 (-14.29%)
Mutual labels: component
Ng Zorro Antd
Angular UI Component Library based on Ant Design
Stars: ✭ 7,841 (+18569.05%)
Mutual labels: antd
Vue Drag Resize
Vue Component for resize and drag elements
Stars: ✭ 1,007 (+2297.62%)
Mutual labels: component
React Native Really Awesome Button
React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱
Stars: ✭ 988 (+2252.38%)
Mutual labels: component
React Customizable Progressbar
Customizable circular progress bar component for React 🍩
Stars: ✭ 37 (-11.9%)
Mutual labels: component
Hellobooks
A Single-Page Library Management App built with nodejs, express and react and redux
Stars: ✭ 37 (-11.9%)
Mutual labels: component
Ant Design Blazor
Enterprise-class UI components based on Ant Design and Blazor.
Stars: ✭ 39 (-7.14%)
Mutual labels: antd
Vue Direction
👋 Declarative, direction-aware hover in Vuejs
Stars: ✭ 35 (-16.67%)
Mutual labels: component
Finder
The Finder component finds files and directories via an intuitive fluent interface.
Stars: ✭ 7,840 (+18566.67%)
Mutual labels: component
React Currency Formatter
💵 react component for currency formatting
Stars: ✭ 38 (-9.52%)
Mutual labels: component
React Antd Todo
A simple todo list app built with React, Redux and Antd - Ant Design
Stars: ✭ 42 (+0%)
Mutual labels: antd
react-sider
Inspired by Ant Design Pro.
Lightweight Ant Design Pro like <Sider />
component integrated with Ant Design Menu.
Features
- Zero work on CSS.
- Minimum configuration and 100% data driven.
- Easy integration with any React app architectures. Only depends on
react
,react-router-dom
,lodash
&antd
. - Native nested menu and pathname support.
- Automatical menu
openKeys
&selectKeys
match based on current pagepathname
.
Installation
yarn add react-sider react react-router-dom lodash antd
Preview
Usage
Sider
Property | Description | Type | Default |
---|---|---|---|
className | className of container | string | '' |
style | style of container | object | { } |
appName | name of application | string | '' |
appLogo | img src of application logo | string | '' |
appBaseUrl | href of sider header | string | '/' |
width | sider container width | number | 256 |
menuData | data of sider menu | arrayOf(MenuItem) | [ ] |
pathname | current page pathname | string | '/' |
MenuItem
Property | Description | Type | Default |
---|---|---|---|
name | menu item name in text | string | - |
path | menu item path (see below example for details) | string | - |
icon | menu item antd icon | string | - |
children | sub menu items | arrayOf(MenuItem) | - |
Example
import ReactSider from 'react-sider';
import 'react-sider/lib/index.css';
import logo from 'assets/logo.svg';
const menuData = [{
// MenuItem name
name: 'Dashboard',
// MenuItem icon (antd icon)
icon: 'dashboard',
// MenuItem relative path
path: 'dashboard',
// SubMenu
children: [{
name: 'Analysis',
path: 'analysis',
children: [{
name: 'Real-time',
path: 'realtime',
}, {
name: 'Offline',
path: 'offline',
}],
},
{
name: 'Monitor',
path: 'monitor',
},
{
name: 'Workplace',
path: 'workplace',
}],
}, {
name: 'Marketing',
icon: 'table',
path: 'marketing',
}, {
name: 'Settings',
icon: 'setting',
path: 'settings',
children: [{
name: 'Users Management',
path: 'users',
}],
}];
const Sider = () => (
<ReactSider
appName="React App Pro"
appLogo={logo}
menuData={menuData}
// better to sync pathname with the router in your application
pathname={this.props.location.pathname}
/>
)
export default Sider;
Notes
-
react-sider
will automatically format nested menu path with/
based onmenuData
structure. - Remember to config
less-loader
within your application building process sincereact-sider
directly importsantd
components styles.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].