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:

import Tree from '@j154004/react-tree';

Add the component to a parent component:

<Tree selectState={state => 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:

{
  test: /\.scss$/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader'
  }, {
    loader: 'sass-loader',
    options: {
      includePaths: [
        path.resolve(__dirname, 'src'),
        componentModulePath
      ]
    }
  }]
}