{"id":20817017,"url":"https://github.com/miteshtagadiya/react-shared-components","last_synced_at":"2025-08-04T14:36:07.971Z","repository":{"id":95875467,"uuid":"252739471","full_name":"miteshtagadiya/React-shared-components","owner":"miteshtagadiya","description":"Share Components across multiple react apps and microfrontends without creating UI library.","archived":false,"fork":false,"pushed_at":"2020-04-24T14:03:35.000Z","size":301,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T02:22:30.835Z","etag":null,"topics":["common-libraries","microfrontend-react","microfrontend-react-apps","react-component","react-components","react-micro-apps","react-shared-component-library","react-ui-components","reusable-app","reusable-component","reusable-components","shared","shared-component","shared-components","shared-folders","shared-library","ui-components","ui-library"],"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/miteshtagadiya.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":"2020-04-03T13:25:51.000Z","updated_at":"2024-11-20T16:53:05.000Z","dependencies_parsed_at":"2023-03-13T16:44:16.468Z","dependency_job_id":null,"html_url":"https://github.com/miteshtagadiya/React-shared-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2FReact-shared-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2FReact-shared-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2FReact-shared-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miteshtagadiya%2FReact-shared-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miteshtagadiya","download_url":"https://codeload.github.com/miteshtagadiya/React-shared-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248138008,"owners_count":21053775,"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":["common-libraries","microfrontend-react","microfrontend-react-apps","react-component","react-components","react-micro-apps","react-shared-component-library","react-ui-components","reusable-app","reusable-component","reusable-components","shared","shared-component","shared-components","shared-folders","shared-library","ui-components","ui-library"],"created_at":"2024-11-17T21:38:46.866Z","updated_at":"2025-04-10T00:36:58.556Z","avatar_url":"https://github.com/miteshtagadiya.png","language":"JavaScript","readme":"# React shared components\n\n- By reusing your own components you can save development time, keep your UI consistent across applications and let your whole team build together.\n- No need to create a UI library for reusable components across apps.\n- Create Shared UI App to create UI components. Deploy Shared UI App and Dynamically load a React Component from that URL using [remote-component](https://github.com/Paciolan/remote-component).\n- You can also add shared styles and common files in Shared App which you want to reuse.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./Shared/Shared.gif\"\u003e\n\u003c/p\u003e\n\n***\n## How Remote Components works\n- The RemoteComponent React Component takes a URL as a prop. The URL is loaded and processed. This file must be a valid CommonJS Module that exports the component as default.\n- While the URL is loading, the fallback will be rendered. This is a similar pattern to React.Suspense. If no fallback is provided, then nothing will be rendered while loading.\n- Once loaded, there will either be an error a Component. The rendering will first be handled by the render callback function. If there is no render callback and err exists, a generic message will be shown.\n- The Component will be rendered either to the render callback if one exists, otherwise, it will be rendered as a standard component.\n***\n## How Shared react components works\n- To use UI Components in all the apps you have to follow this for all the apps.\n- Install [remote-component](https://github.com/Paciolan/remote-component)\n```sh\n$ npm install @paciolan/remote-component --save\n```\n- Remote Components will require some dependencies to be injected into them. At the minimum, we'll be injecting the React dependency.\n- The web application can include dependencies and inject them into the RemoteComponent. At a minimum, you will probably need the react dependency.\n- Create a file **remote-component.config.js** in the root of the web application.\n- If you are using any library or package that the Ui component is using then you have to add that dependency in this file.\n- ex: If you are using Material-UI to create a UI component then you have to add material-ui as a dependency in this file like this:   \n```[\"@material-ui/core\"]: require(\"@material-ui/core\")```\n```sh\n/**\n * remote-component.config.js\n * Dependencies for Remote Components\n */\nmodule.exports = {\n  resolve: {\n    react: require(\"react\")\n  }\n};\n```\n- Create a file named **RemoteComponent.js** in the src folder.\n- Export RemoteComponent with the requires from remote-component.config.js. This will inject the dependencies into the RemoteComponent.\n```sh\n/*\n * src/components/RemoteComponent.js\n */\nimport {\n  createRemoteComponent,\n  createRequires\n} from \"@paciolan/remote-component\";\nimport { resolve } from \"../remote-component.config.js\";\n\nconst requires = createRequires(resolve);\nexport const RemoteComponent = createRemoteComponent({ requires });\n```\n- Usage:\n- Create a file that exports al UI components.\n ```\n import { RemoteComponent } from \"./RemoteComponent\";\n\nconst element = document.getElementById(\"app\");\nconst url = \"https://raw.githubusercontent.com/Paciolan/remote-component/master/examples/remote-components/HelloWorld.js\";\nconst HelloWorld = props =\u003e\n  \u003cRemoteComponent\n    url={url}\n    render={({ err, Component }) =\u003e\n      err ? \u003cdiv\u003e{err.toString()}\u003c/div\u003e : \u003cComponent {...props} /\u003e\n    }\n  /\u003e\n);\nexport default HelloWorld;\n ```\n - Now you can import HelloWorld component in your app like this:\n ```import { HelloWorld } from \"./index\";```\n - To use UI components in all the apps you have to add this configuration in all the apps.\n \n***\n## How to create Shared UI App\n- To Create a Shared UI app follow this configuration.\n- Create a Folder named Shared.\n- Create a folder named src/UI(Or name you want).\n- Create Components in the UI folder.\n- Ex: To create a Label component in src folder create a file Label.js\n```\nimport React from 'react';\nimport Typography from '@material-ui/core/Typography';\n\nexport default function Title(props) {\n  return (\n    \u003cTypography component=\"h2\" variant=\"h6\" color=\"primary\" gutterBottom\u003e\n      {props.children}\n    \u003c/Typography\u003e\n  );\n}\n```\n- UI Component Label is created.\n- Create package.json at the root of the app.\n- Add all dependencies in the package.json which is required to create UI component. \n- Ex: Title Component is required material-ui, So Install material-ui first.\n- If you want common CSS across all the apps or any common file that is used by all the apps then you can add it in the src folder.\n- This file must be a valid CommonJS Module that exports the component as default, So we have to convert es6 files to commonjs.\n- Create .babelrc in the root folder.\n```\n{\n    \"presets\": [\n        \"minify\",\n        \"@babel/preset-react\",\n        \"@babel/env\"\n    ],\n    \"plugins\": [\n        \"@babel/plugin-proposal-class-properties\",\n        \"@babel/plugin-proposal-object-rest-spread\"\n    ]\n}\n```\n- Install  \"@babel/preset-react\", \"@babel/env\", \"@babel/plugin-proposal-class-properties\", \"@babel/plugin-proposal-object-rest-spread\".\n- Add scripts in package.json to convert es6 files to commonJs module using babel.\n```\n\"scripts\": {\n\"build\": \"babel ./src --out-dir build --extensions '.ts,.tsx,.js,.jsx' \u0026\u0026 cp ./src/index.css build/\",\n\"start\": \"serve --port 5000 --cors build\"\n},\n```\n- When you run npm run build, It will convert all files from src directory and add it in build directory and copy index.css file in the build folder.\n- Now to use shared components and styles you have to serve build folder.\n- You can get components js file from http://localhost:5001/UI/Label.js\n***\n## Example of this repo\n- There are 2 apps created in this repo app1 and app2 which are using the shared app for reusable components.\n- Created Remore-Component.jsx and remote-component-config.js files and are the same for both apps.\n```\n/**\n * remote-component.config.js\n *\n * Dependencies for Remote Components\n */\n\nmodule.exports = {\n  resolve: {\n    react: require(\"react\"),\n    [\"@material-ui/core\"]: require(\"@material-ui/core\"),\n    [\"@material-ui/icons\"]: require(\"@material-ui/icons\"),\n    [\"@material-ui/core/Link\"]: require(\"@material-ui/core/Link\"),\n    [\"@material-ui/core/styles\"]: require(\"@material-ui/core/styles\"),\n    [\"@material-ui/core/Typography\"]: require(\"@material-ui/core/Typography\"),\n    [\"recharts\"]: require(\"recharts\")\n  }\n};\n\n```\n```\nimport { createRemoteComponent } from \"@paciolan/remote-component/dist/lib/createRemoteComponent\";\nimport { createRequires } from \"@paciolan/remote-component/dist/lib/createRequires\";\nimport { resolve } from \"./remote-component.config.js\";\n\nconst requires = createRequires(resolve);\nexport const RemoteComponent = createRemoteComponent({ requires });\n\n```\n- Created **indexShared.js** file for add all UI components.\n```\nimport React from \"react\";\nimport { RemoteComponent } from \"./RemoteComponent\";\n\nconst Title = (props) =\u003e {\n  const url1 = \"http://localhost:5000/ui/Title.js\";\n  return (\n    \u003cRemoteComponent\n      url={url1}\n      render={({ err, Component }) =\u003e\n        err ? \u003cdiv\u003e{err.toString()}\u003c/div\u003e : \u003cComponent {...props} /\u003e\n      }\n    /\u003e\n  );\n};\nexport { Title };\n\nconst Deposits = (props) =\u003e {\n  const url = \"http://localhost:5000/ui/Deposits.js\";\n  return (\n    \u003cRemoteComponent\n      url={url}\n      render={({ err, Component }) =\u003e\n        err ? \u003cdiv\u003e{err.toString()}\u003c/div\u003e : \u003cComponent {...props} /\u003e\n      }\n    /\u003e\n  );\n};\nexport { Deposits };\n\nconst Chart = (props) =\u003e {\n  const url = \"http://localhost:5000/ui/Chart.js\";\n  return (\n    \u003cRemoteComponent\n      url={url}\n      render={({ err, Component }) =\u003e\n        err ? \u003cdiv\u003e{err.toString()}\u003c/div\u003e : \u003cComponent {...props} /\u003e\n      }\n    /\u003e\n  );\n};\nexport { Chart };\n\nconst Orders = (props) =\u003e {\n  const url = \"http://localhost:5000/ui/Orders.js\";\n  return (\n    \u003cRemoteComponent\n      url={url}\n      render={({ err, Component }) =\u003e\n        err ? \u003cdiv\u003e{err.toString()}\u003c/div\u003e : \u003cComponent {...props} /\u003e\n      }\n    /\u003e\n  );\n};\nexport { Orders };\n\nconst listItems = (props) =\u003e {\n  const url = \"http://localhost:5000/ui/listItems.js\";\n  return (\n    \u003cRemoteComponent\n      url={url}\n      render={({ err, Component }) =\u003e\n        err ? \u003cdiv\u003e{err.toString()}\u003c/div\u003e : \u003cComponent {...props} /\u003e\n      }\n    /\u003e\n  );\n};\nexport { listItems };\n```\n- imported all UI components in Dashboard.js file\n```\nimport { Title, Deposits, Chart, Orders } from \"./indexShared\";\n```\n- Created a Shared folder for reusable components.\n- Created the Common/ui folder and added all reusable components in ui folder.\n- Created index.css file in the Common folder to reuse the same style in all the apps.\n#### Start the Project\n- Clone the repo\n- Open each app and run **npm install**.\n- Open Shared app and run **npm run build**\n- Run all the apps by **npm start**\n```\napp1: http://localhost:3001\napp2: http://localhost:3002\nshared: http://localhost:5000\n```\n- UI components Chart, Deposits, Orders, and Title are shared with both the apps.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiteshtagadiya%2Freact-shared-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiteshtagadiya%2Freact-shared-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiteshtagadiya%2Freact-shared-components/lists"}