How to use @react-md/tree - 10 common examples
To help you get started, we’ve selected a few @react-md/tree examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mlaursen / react-md / packages / documentation / components / Demos / Tree / CustomizingTreeItems.tsx View on Github 
const CustomizingTreeItems: FC = () => {
const selection = useTreeItemSelection([demo.itemId], false);
const expansion = useTreeItemExpansion([
srcFolder.itemId,
publicFolder.itemId,
]);
return (
);
};const SingleSelectTree: FC = () => {
const selection = useTreeItemSelection([], false);
const expansion = useTreeItemExpansion([]);
return (
}
/>
);
};const MultiSelectTree: FC = () => {
const selection = useTreeItemSelection([], true);
const expansion = useTreeItemExpansion([]);
return (
}
/>
);
};const MultiSelectTree: FC = () => {
const selection = useTreeItemSelection([], true);
const expansion = useTreeItemExpansion([]);
return (
);
};function useNavigation(pathname: string): TreeState {
const {
expandedIds,
onItemExpansion,
onMultiItemExpansion,
} = useTreeItemExpansion(() => getParentIds(pathname));
const prevPathname = useRef(pathname);
if (pathname !== prevPathname.current) {
prevPathname.current = pathname;
const ids = Array.from(
new Set([...expandedIds, ...getParentIds(pathname)])
);
if (ids.length !== expandedIds.length) {
onMultiItemExpansion(ids);
}
}
return {
multiSelect: false,
selectedIds: [pathname],
onItemSelect: noop,const SingleSelectTree: FC = () => {
const selection = useTreeItemSelection([], false);
const expansion = useTreeItemExpansion([]);
return (
);
};const MultiSelectTree: FC = () => {
const selection = useTreeItemSelection([], true);
const expansion = useTreeItemExpansion([]);
return (
}
/>
);
};const MultiSelectTree: FC = () => {
const selection = useTreeItemSelection([], true);
const expansion = useTreeItemExpansion([]);
return (
);
};const SingleSelectTree: FC = () => {
const selection = useTreeItemSelection([], false);
const expansion = useTreeItemExpansion([]);
return (
}
/>
);
};const SingleSelectTree: FC = () => {
const selection = useTreeItemSelection([], false);
const expansion = useTreeItemExpansion([]);
return (
);
};@react-md/tree
A package for creating an accessible tree component following the tree role.
