@tmnrp/react-explorer
@tmnrp/react-explorer is a lightweight latest treanding markup to display the explorer.
Features
- Configurable html attributes with ease.
Examples link
https://tmnrp-react-ui.vercel.app/explorerInstallation link
$ npm i @tmnrp/react-explorerProperties
@tmnrp/react-explorer (IExplorer) is currently extended with the following properties.
| Properties | type | Description |
|---|---|---|
| items | Array | Array of items to be displayed in the explorer component. |
| ...props | HTML UL props | Common HTML UL properties that needs to be applied to the explorer. |
@tmnrp/react-explorer (IExplorerItem) is currently extended with the following properties.
| Properties | type | Description |
|---|---|---|
| icon | React.ReactNode | Icon component to be displayed. |
| label | React.ReactNode | Label component to be displayed. |
| itemProps | HTML div props | Common HTML DIV properties that needs to be applied to the explorer. |
| items | Array | Array of items to be displayed in the explorer component. |
| ...props | HTML UL props | Common HTML UL properties that needs to be applied to the explorer. |
Implementation
import { Explorer, IExplorerItem } from "@tmnrp/react-explorer";
//
const App = () => {
const router = useRouter();
//
return (
<div className="pb-2 border-b dark:border-b-gray-800">
<Explorer items={getExplorerContent({ router })} />
</div>
);
};
//
export const getExplorerContent = ({
router,
}: {
router: NextRouter;
}): Array<IExplorerItem> => [
{
icon: <GoogleMaterialIcons iconName="double_arrow" />,
label: "Breadcrumbs",
items: [
{
label: "Example 1",
icon: <GoogleMaterialIcons iconName="view_list" />,
itemProps: {
onClick: () => router.push(CONST_PAGES.BREADCRUMBS.PATH),
},
},
],
},
{
icon: <GoogleMaterialIcons iconName="interests" />,
label: "Google material icons",
items: [
{
label: "Examples",
icon: <GoogleMaterialIcons iconName="view_list" />,
itemProps: {
onClick: () => router.push(CONST_PAGES.GOOGLE_MATERIAL_ICONS.PATH),
},
},
],
},
{
icon: <GoogleMaterialIcons iconName="sync" />,
label: "Progressbar",
items: [
{
label: "Examples",
icon: <GoogleMaterialIcons iconName="view_list" />,
itemProps: {
onClick: () => router.push(CONST_PAGES.PROGRESSBAR.PATH),
},
},
],
},
{
icon: <GoogleMaterialIcons iconName="smart_button" />,
label: "Theme-switcher",
items: [
{
label: "Examples",
icon: <GoogleMaterialIcons iconName="view_list" />,
itemProps: {
onClick: () => router.push(CONST_PAGES.THEME_SWITCHER.PATH),
},
},
],
},
{
icon: <GoogleMaterialIcons iconName="smart_button" />,
label: "Sidebar",
items: [
{
label: "Examples",
icon: <GoogleMaterialIcons iconName="view_list" />,
itemProps: {
onClick: () => router.push(CONST_PAGES.SIDEBAR.PATH),
},
},
],
},
{
icon: <GoogleMaterialIcons iconName="smart_button" />,
label: "Explorer",
items: [
{
label: "Examples",
icon: <GoogleMaterialIcons iconName="view_list" />,
itemProps: {
onClick: () => router.push(CONST_PAGES.EXPLORER.PATH),
},
},
],
},
];
Todos
- Let me know :-)
License
MIT Tony Martin