https://github.com/elementsweb/react-tree
React based tree component
https://github.com/elementsweb/react-tree
component material-ui react redux tree
Last synced: 3 months ago
JSON representation
React based tree component
- Host: GitHub
- URL: https://github.com/elementsweb/react-tree
- Owner: elementsweb
- License: mit
- Created: 2018-04-21T15:24:31.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-24T17:13:00.000Z (over 7 years ago)
- Last Synced: 2025-03-11T00:08:44.946Z (about 1 year ago)
- Topics: component, material-ui, react, redux, tree
- Language: JavaScript
- Homepage: https://elementsweb.github.io/react-tree/
- Size: 1.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Tree
## __In development!__
React based tree view component. Developed to visualise items from a NoSQL database that can be related to one another in a nested fashion.
## Features
✔️ Expand top-level items to reveal child items
✔️ Integrates with your existing Redux store to allow you to writing middleware for actions emitted by the component
✔️ Support for multiple reusable React-Redux components in an existing Redux application through separate state reduction
✔️ Custom state selectors to store component state in separate places in the Redux store
## Demo
You can import your component into the storybook, a good place to showcase your component.
Run the storybook with `npm run storybook` and navigate to `http://localhost:6006` in your browser.
### Github Pages
Before commiting your changes to Github you can run `npm run build-storybook` to build the storybook so that it can be hosted on Github pages.
## Usage
### Import the component
Import the component/s into your project:
```javascript
import Tree from '@j154004/react-tree';
```
Add the component to a parent component:
```javascript
state.itemTypeTwo.component} namespace="one" />
```
- __`selectState`__ is a function to tell the component where it should store its state in your application store.
- __`namespace`__ is the namespace to use in action types. For the above example the action trigger would look something like: `@@react-tree/two/INCREMENT_COUNTER`. Defaults to `default`, but it's recommended you always use a key, especially if you use the same component multiple times in one view.
### Include reducers
You can store the component state anywhere in your Redux store, just import the component reducer:
```
import { combineReducers } from 'redux';
import { componentReducer } from '@j154004/react-tree';
const rootReducer = combineReducers({
itemTypeTwo: combineReducers({
component: componentReducer('two')
})
});
```
### Import SASS styles
Import the styles into your project also (in an existing SASS file):
```
@import "~MODULE_NAME/src/styles";
```
### Include SASS in Webpack build
Add another path to include in the rule for SCSS files:
```javascript
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, 'src'),
componentModulePath
]
}
}]
}
```