@monokle/tree-navigator

@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 />