DEV Community

Cover image for How to create an npm library from react components

How to create an npm library from react components

Beingana Jim Junior on February 28, 2021

In this tutorial I will be showing you how to create an npm library that is composed of react component. This will definitely help you incase you w...
Collapse
 
shivams136 profile image
Shivam Sharma

Is there any way to use the react-scripts toolchain to build a library? I mean CRA has already done everything for us so why set up rollup separately?

Collapse
 
jimjunior profile image
Beingana Jim Junior

We used CRA for previewing our component but rollup is the one in charge of bundling the library

Collapse
 
ghvpkhsh profile image
ghvpkhsh

اکسسوری‌های قهوه که برای دستیابی به بهترین طعم و عطر قهوه، باید سرمایه‌گذاری کرد. قیمت اکسسوری قهوه اکسسوری‌هایی مانند بانک قهوه، ماگ قهوه، همزن قهوه و آسیاب قهوه از جمله لوازم ضروری هستند که هر علاقه‌مند به قهوه‌ای باید داشته باشد. همچنین، خرید این لوازم جانبی قهوه از طریق فروشگاه‌های آنلاین، راحت‌تر و سریع‌تر است.

Collapse
 
shivams136 profile image
Shivam Sharma

How to make this supporting SASS, CSS Modules?

Collapse
 
jimjunior profile image
Beingana Jim Junior

I found an article online that I think can help u
Here is the link to the blog post

Collapse
 
zoodika profile image
zoodika

کادو براي اقايان
هديه دادن به آقايان مي‌تواند بسته به سليقه و علاقه‌هاي فرد، متنوع باشد. در زير چند پيشنهاد براي کادوهاي مناسب براي آقايان آورده شده است:
ساعت مچي:
يک ساعت شيک و با کيفيت مي‌تواند يک هديه عالي باشد. کادو براي مرد متاهل برندهاي معروف و مدل‌هاي مختلفي وجود دارند که مي‌توانيد بسته به سليقه‌ي گيرنده انتخاب کنيد.
لوازم الکترونيکي:
گجت‌هاي الکترونيکي مانند گوشي هوشمند، هدفون بي‌سيم، تبلت، يا اسپيکر بلوتوثي هميشه محبوب هستند.
لوازم ورزشي:
اگر گيرنده به ورزش علاقه‌مند است، لوازم ورزشي مانند کفش ورزشي، لباس ورزشي، يا تجهيزات مخصوص ورزش مورد علاقه‌اش مي‌تواند انتخاب خوبي باشد.

Collapse
 
erikswed profile image
Hans Erik

Thanks for the tutorial I learn much.
You say to do "npm link" the react-library if wanting to test it in some React App locally.
What about this react-npm-library app we build in this tutorial, that host the react-library. Can I do npm link trying the library?

Collapse
 
jimjunior profile image
Beingana Jim Junior • Edited

npm link is for testing locally in react app in another directory but since the react-library is already in react-npm-library there is no need to link it. But if you link it will also work

Collapse
 
erikswed profile image
Hans Erik

Thanks it's working I publish to npm cool thanks.
But when I npm link I can't compile the exacts same code I think it's missing something in the rollup.config.js look here please:
stackoverflow.com/questions/694119...

Thread Thread
 
erikswed profile image
Hans Erik • Edited

When I do npm link and start server I get the error:
"Failed to compile.
src\react-library\dist\index.cjs.js
Line 11:261: Expected an assignment or function call and instead saw an expression no-unused-expressions"
Am I suppose to change in the package.json the "main": "dist/index.cjs.js", to this: "main": "src/index.js", ?

I Try that with the npm link in place and then get duplicate react hook error even the react-library use peerDependencies in package.json.
reactjs.org/warnings/invalid-hook-...
Please advice

Thread Thread
 
erikswed profile image
Hans Erik

If anyone else need an answer. Thanks I fixed it reading the docs
reactjs.org/warnings/invalid-hook-...
"This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.
Note"

Collapse
 
dcazrael profile image
dcazrael

Hey Beingana,

great Tutorial. Was exactly what I was looking for.

While reading through I noticed this
torch button.jsx
torch index.css

Was this maybe supposed to be
touch button.jsx
touch index.css

Again, thanks for the tutorial

Collapse
 
jimjunior profile image
Beingana Jim Junior

Thank you... I will update that so soon.

Collapse
 
ayanweb profile image
Ayan-web

import { terser } from 'rollup-plugin-terser'
what does terser do ??

Collapse
 
jimjunior profile image
Beingana Jim Junior

Terser is a library that minifies code. This is good for production mode.
If you don't include that plugin then rollup will just compile your code without minifing it.

Collapse
 
ayanweb profile image
Ayan-web

Thanks that really helped a lot

Collapse
 
loucadufault profile image
loucadufault

Shouldn't @babel/runtime be included as a peerDependency?

Collapse
 
b5321766a profile image
pigevolkoju

Thank you ... you save my time

Next episode support tsx ?

Collapse
 
jsenosiain profile image
Joaquin Senosiain, Jr

Is there a simple way to adapt this so that it would work with typescript?