@monokle/tree-navigator
v1.0.4
Published
React library for rendering tree structures based on the Redux store.
Downloads
3
Keywords
Readme
@monokle/tree-navigator
Create tree structures based on your Redux state then easily render it in React.
Features:
- Define sections (tree levels) and section items (tree nodes) using simple blueprint objects
- Virtualized rendering of trees
- Expand & collapse sections
- Customize both sections and items with your own components
Usage
// RTK Listeners setup
export const listenerMiddleware = createListenerMiddleware();
export type AppStartListening = TypedStartListening<RootState, AppDispatch>;
export type AppStopListening = TypedStopListening<RootState, AppDispatch>;
export const startAppListening = listenerMiddleware.startListening as AppStartListening;
export const stopAppListening = listenerMiddleware.stopListening as AppStopListening;
// configure the redux store
const store = configureStore({
reducer: combineReducers({
// add the reducer created by rtk-tree-navigator
...getTreeNavigatorReducer(),
// other reducers...
}),
middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(
listenerMiddleware.middleware
),
});
// rtk-tree-navigator setup
setupTreeNavigators({
startListening: startAppListening,
stopListening: stopAppListening,
dispatch: store.dispatch
})
// create your first tree navigator
export const treeNavigator = createTreeNavigator("Resources");
// register a section
treeNavigator.registerSection("sectionId" {
scope: (state) => state.main.resources,
build: {
label: "Some section
},
items: {
build: scope => scope.resources.map((resource) => {
return {
id: resource.id,
label: resource.name,
props: {
isSelected: resource.isSelected
}
}
}),
}
});
// register a subsection
treeNavigator.registerSection("sectionId.subsectionId", {/*...*/});
// unregister a section
treeNavigator.unregisterSection('id');
// the tree navigator can be rendered by using the Renderer component
<treeNavigator.Renderer />