1. Home
  2. Development
  3. React Global Components

React Global Components

thumbnail
Vahid Kh, modified 5 Years ago.
React Global Components
Junior Member Posts: 54 Join Date: 8/6/19 Recent Posts
Hello
How can I reuse a React Component in separate React portlets?
​​​​​​​for more detail,  assume I have two react portlet and they import the same Component named Footer,
How and Where can I define Footer that can be used in both?
thumbnail
David H Nebinger, modified 5 Years ago.
RE: React Global Components
Liferay Legend Posts: 14933 Join Date: 9/2/06 Recent Posts
You can't and you shouldn't do this.

Each portlet, by definition, should be able to render itself regardless of the page that it gets dropped on. There should be no dependencies on other portlets or even the global context because there is always a possibility those things won't be there.

A portlet is still just a portlet, even if it is written in React. Give them both the same footer component and let them render it.

That said, you're free to use your own NPM repository, build React components and publish them into your NPM repo, then each React portlet could depend upon that component from your repo, but that's compile-time management of your components, not runtime management.
thumbnail
Christoph Rabel, modified 5 Years ago.
RE: React Global Components
Liferay Legend Posts: 1555 Join Date: 9/24/09 Recent Posts
I think so.
Liferay has put a lot of effort in their loader to support things like that. You should be able to export your component in one bundle and require/import it in another module (or portlet). I have never tried it, but it should be possible.
https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/referencing-an-npm-modules-package
https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/obtaining-dependency-npm-package-descriptors
thumbnail
Vahid Kh, modified 5 Years ago.
RE: React Global Components
Junior Member Posts: 54 Join Date: 8/6/19 Recent Posts
No, a component can't be imported from another portlet, I think their scopes are separate,
​​​​​​​And as David said the best solution is creating npm package and importing it into various portlet.
thumbnail
Ivan Zaera, modified 5 Years ago.
RE: React Global Components
Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
You can see an example application with two widget portlets and three shared bundles that export React and Redux for the other two to consume here:
https://github.com/izaera/liferay-js-toolkit-showcase/tree/react
That may inspire you on how to structure your solution.
thumbnail
Vahid Kh, modified 5 Years ago.
RE: React Global Components
Junior Member Posts: 54 Join Date: 8/6/19 Recent Posts
Thanks my friend for all of your solutions 
Babban Singh, modified 5 Years ago.
RE: React Global Components
New Member Post: 1 Join Date: 1/11/20 Recent Posts
@Vahid, Were you able to achieve that, I am also trying to do that. I followed the link provided by Ivan, my .npmbundlerrc of module (test-react-portlet) is as below
 "config": {
        "imports": {
                "react-provider": {
                        "prop-types": "15.6.2",
                        "react": "16.8.6",
                          "react-dom": "16.8.6"
                  },
                "common-component": {
                        "/": "1.0.0"
                  },
                "redux-store": {
                    "/": "1.0.0"
                }
        }
    }my common-component  module contains one Button.js component and I am trying to use this Button component into test-react-portlet as import Button from 'common-component' but I am not able to do this. I am getting below error on browser console while going to use test-react-portlet in the page.Liferay AMD Loader: Unhandled failure : <script src="http://localhost:8080common-component@1.0.0/src/index.js?languageId=en_US"> while resolving modules.see the src url inside script http://localhost:8080 missing slash(/o/resolved-module/) , I think it should be http://localhost:8080/o/js/resolved-module/common-component@1.0.0/src/index.js?languageId=en_US.Now what I have to do.
Jamie Sammons, modified 8 Months ago.
RE: React Global Components
New Member Post: 1 Join Date: 1/7/25 Recent Posts

To reuse a React component like Footer in multiple React portlets, you can define the Footer component in a shared or common directory that is accessible to both portlets. Typically, you would create a separate folder, such as src/components, and place the Footer.js component there. Both portlets can then import the Footer component from this centralized location. For instance, in both portlet files, you would import the Footer component using a relative path like import Footer from '../components/Footer'. This allows both portlets to use the same Footer component without duplicating code. Additionally, if your application is large or uses micro-frontends, you might consider a package manager or module bundler that handles dependencies across different portlets, ensuring the component remains consistent across them.