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.

github mlaursen / react-md / packages / documentation / components / Demos / Tree / CustomizingTreeItems.tsx View on Github external
const CustomizingTreeItems: FC = () => {
  const selection = useTreeItemSelection([demo.itemId], false);
  const expansion = useTreeItemExpansion([
    srcFolder.itemId,
    publicFolder.itemId,
  ]);

  return (
    
  );
};
github mlaursen / react-md / packages / documentation / components / Demos / Tree / SingleSelectTree.tsx View on Github external
const SingleSelectTree: FC = () => {
  const selection = useTreeItemSelection([], false);
  const expansion = useTreeItemExpansion([]);

  return (
    }
    />
  );
};
github mlaursen / react-md / packages / documentation / components / Demos / Tree / MultiSelectTree.tsx View on Github external
const MultiSelectTree: FC = () => {
  const selection = useTreeItemSelection([], true);
  const expansion = useTreeItemExpansion([]);

  return (
    }
    />
  );
};
github mlaursen / react-md / packages / documentation / src / components / Demos / Tree / MultiSelectTree.tsx View on Github external
const MultiSelectTree: FC = () => {
  const selection = useTreeItemSelection([], true);
  const expansion = useTreeItemExpansion([]);

  return (
    
  );
};
github mlaursen / react-md / packages / documentation / components / Layout / NavigationTree.tsx View on Github external
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,
github mlaursen / react-md / packages / documentation / src / components / Demos / Tree / SingleSelectTree.tsx View on Github external
const SingleSelectTree: FC = () => {
  const selection = useTreeItemSelection([], false);
  const expansion = useTreeItemExpansion([]);

  return (
    
  );
};
github mlaursen / react-md / packages / documentation / components / Demos / Tree / MultiSelectTree.tsx View on Github external
const MultiSelectTree: FC = () => {
  const selection = useTreeItemSelection([], true);
  const expansion = useTreeItemExpansion([]);

  return (
    }
    />
  );
};
github mlaursen / react-md / packages / documentation / src / components / Demos / Tree / MultiSelectTree.tsx View on Github external
const MultiSelectTree: FC = () => {
  const selection = useTreeItemSelection([], true);
  const expansion = useTreeItemExpansion([]);

  return (
    
  );
};
github mlaursen / react-md / packages / documentation / components / Demos / Tree / SingleSelectTree.tsx View on Github external
const SingleSelectTree: FC = () => {
  const selection = useTreeItemSelection([], false);
  const expansion = useTreeItemExpansion([]);

  return (
    }
    />
  );
};
github mlaursen / react-md / packages / documentation / src / components / Demos / Tree / SingleSelectTree.tsx View on Github external
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.

MIT
Latest version published 4 months ago

Package Health Score

73 / 100
Full package analysis