{"id":22994373,"url":"https://github.com/donadam2/react-breadcrumbs","last_synced_at":"2026-05-09T15:06:11.843Z","repository":{"id":163903345,"uuid":"620162796","full_name":"DonAdam2/react-breadcrumbs","owner":"DonAdam2","description":"Show you how to create a breadcrumbs component with react router dom v6","archived":false,"fork":false,"pushed_at":"2025-01-06T10:15:48.000Z","size":3272,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-08T03:42:42.045Z","etag":null,"topics":["breadcrumbs","react","react-router-dom-v6"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DonAdam2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-28T06:39:23.000Z","updated_at":"2025-01-06T10:15:52.000Z","dependencies_parsed_at":"2024-12-15T05:18:30.269Z","dependency_job_id":"f1daed43-b527-4f12-b2ce-7ea6579c4e40","html_url":"https://github.com/DonAdam2/react-breadcrumbs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"DonAdam2/webpack-react-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-breadcrumbs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-breadcrumbs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-breadcrumbs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Freact-breadcrumbs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DonAdam2","download_url":"https://codeload.github.com/DonAdam2/react-breadcrumbs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246819741,"owners_count":20839094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breadcrumbs","react","react-router-dom-v6"],"created_at":"2024-12-15T05:17:58.575Z","updated_at":"2026-05-09T15:06:11.779Z","avatar_url":"https://github.com/DonAdam2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Overview:\n\nThis project shows you how to create a breadcrumbs component with react router dom v6\n\n### To display nested routes only:\n\n- Set `isDisplayNestedRoutesOnly` to `true` in `/src/js/components/breadcrumbs/Breadcrumbs.jsx`\n\n  ```\n  modifiedRoutes = constructBreadcrumbsLinks({ routes, isDisplayNestedRoutesOnly: true });\n  ```\n\n- Pass `constructBreadcrumbsLinks({ routes })` to `useRoutes` hook in `/src/js/routing/routingConstants/RoutesConfig`\n\n  ```\n  export default function Router() {\n    return useRoutes(constructBreadcrumbsLinks({ routes }));\n  }\n  ```\n\n### To display parent routes with nested routes:\n\n- Set `isDisplayNestedRoutesOnly` to `false` in `/src/js/components/breadcrumbs/Breadcrumbs.jsx`\n\n  ```\n  modifiedRoutes = constructBreadcrumbsLinks({ routes, isDisplayNestedRoutesOnly: false });\n  ```\n\n- Pass `routes` to `useRoutes` hook in `/src/js/routing/routingConstants/RoutesConfig`\n\n  ```\n  export default function Router() {\n    return useRoutes(routes);\n  }\n  ```\n- Use the `\u003cOutlet /\u003e` component in parent routes\n\n## Prerequisites:\n\n- nodeJS \u003e 14.X.X or Docker\n\n## Installing / Getting Started:\n\n### Development (locally):\n\n- Clone repo =\u003e `git clone git@github.com:DonAdam2/webpack-react-boilerplate.git`\n- Navigate to project directory `cd webpack-react-boilerplate`\n- Install dependencies =\u003e `yarn install`\n- Start the development server =\u003e `yarn start`\n\n### Development (using Docker):\n\n- Clone repo =\u003e `git clone git@github.com:DonAdam2/webpack-react-boilerplate.git`\n- Navigate to project directory `cd webpack-react-boilerplate`\n- Install dependencies (required for prettier) =\u003e `yarn install`\n- Start the development server =\u003e `docker-compose up web-dev`\n\n### Windows subsystem for linux \"WSL2\" (for Docker):\n\n- If you are using Windows 11 or 10, it's recommended to use WSL2:\n  - [Install WSL on windows](https://pureinfotech.com/install-wsl-windows-11/)\n  - [Install docker on windows](https://docs.docker.com/desktop/install/windows-install/)\n  - Open docker desktop app:\n    - settings =\u003e resources =\u003e WSL integration =\u003e enable required Ubuntu integration\n  - [Setup SSH keys (if you want) on windows and share it with WSL](https://devblogs.microsoft.com/commandline/sharing-ssh-keys-between-windows-and-wsl-2/)\n  - Create a new directory in ubuntu:\n  ```\n  mkdir workspace\n  cd workspace\n  ```\n  - Clone this repo into the selected Ubuntu:\n  ```\n  git clone git@github.com:DonAdam2/webpack-react-boilerplate.git\n  ```\n  - Install curl in Ubuntu:\n  ```\n  sudo apt-get install curl\n  ```\n  - Install nvm:\n  ```\n  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash\n  ```\n  - Install required node version:\n  ```\n  nvm install --lts\n  ```\n  - Install yarn globally:\n  ```\n  npm install -g yarn\n  ```\n  - Update permissions to be able to install NPM packages\n  ```\n  sudo chown -R $(whoami) ~/workspace/webpack-react-boilerplate\n  ```\n  - Install packages (for linting purposes):\n  ```\n  yarn install\n  ```\n  - Run docker for development:\n  ```\n  docker-compose up web-dev\n  ```\n\n## Docker for production (_basic setup_) (modify it to your needs):\n- Update the **_production_** section of the **_Dockerfile_** to meet your needs\n- Run the following command to build your image =\u003e `docker-compose up web-prod`\n\n## Configuring Prettier\n\nThis build relies on [Prettier formatter](https://prettier.io/) to enforce code style. And [ESLint](https://eslint.org/) for identifying problematic patterns found in the code.\n\n- Setting up prettier:\n\n  1- You can find steps on how to set up prettier formatter with WebStorm/PhpStorm [here](https://prettier.io/docs/en/webstorm.html#running-prettier-on-save-using-file-watcher).\n\n  **Notes**:\n\n  - It's better to use the local `node_modules` version of prettier instead of a global one, to avoid version conflicts (in case the globally installed version does not match the version specified in `package.json`).\n\n  2- Follow the next steps to set up **prettier** and **eslint** in **_VS Code_**:\n\n  - Install `prettier` plugin\n\n  - Install `eslint` plugin\n\n  - Open **_VS Code settings_** `CTRL + ,`:\n\n    a- Search for `formatter` =\u003e check **Format on save**\n\n    b- Search for `prettier` =\u003e add `.prettierrc` in **_Prettier: Config Path_** section \u0026\u0026 check **_Prettier: Require Config_**\n\n  3- Please refer to other tutorials if you are using a different IDE.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\u003cbr\u003e\nIt will open [http://localhost:3000](http://localhost:3000) automatically in the browser to see your app.\n\nAll changes will be injected automatically without reloading the page.\u003cbr\u003e\n\nYou will see in the console the following:\n\n- All redux store related changes\n- Any of the following errors:\n  1. Linting errors.\n  2. Code format errors (because of [prettier](https://prettier.io/))\n\n### `yarn build`\n\nBuilds the app for production to the `dist` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n### `yarn build:serve`\n\nServes the app on `http://localhost:8080/` from the `dist` folder to check the production version.\n\n**_Note:_** Use this script only if you ran the build script `yarn build`.\n\n### `yarn analyze-bundle`\n\nIt allows you to analyze the bundle size.\n\n### `yarn generate` **_component_** || **_container_** || **_page_** || **_hook_** || **_service_** || **_reducer_** || **_progressiveWebApp_**\n\n- It creates a boilerplate for component, container, page, custom hook, service, reducer or progressive web app setup.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Freact-breadcrumbs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonadam2%2Freact-breadcrumbs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Freact-breadcrumbs/lists"}