Build a Component Library for React with Typescript [2021]

How to add ref for the components that we are created??

If I want to use tailwindcss both in my component library and in the projects that are consuming it, how do I do that?

Hello I don't know if anyone is going to reply to me or not but hoping they would I'm posting my comment. I'm using npm init the same process but what I'm trying to make contains mui card components. Now, I have written webpack config file ts config file in the root folder have exported all files in index.ts named entry point file , but still when i pack it says "interface" and "type" keyword is not recognised. I tried writing babel.config to fix this problem but it just excluded all the node modules that way and it became another problem overall. any suggestions on what to do when basic typescript keywords are not accepted. I even used babel loader and included all files in resolve part like ts and tsx and jsx.

can we use a Button from @mui/material/Button in this component library ?

i cant use this in windows:(

Really great video. Thanks so much.

Thank you! Well done!

How do we compile assests, css/scss?

thank you

and add taiwind there?

Many thanks for this great tutorial! 🙏🏼

Would putting the react and react-dom in "peerDependencies" of the component library solve the problem of hooks you mentioned?

hey, any update on how to use scss modules (style.module.scss)

Thanks a lot ,

How can we add MIT licence in it ?

I am on windows and whenever I try to run the build command it shows an error in the terminal.

F:\Button>npm run build

> [email protected] build
> rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs

'rm' is not recognized as an internal or external command,
operable program or batch file.

Will wait for your kind response.
PS: I also used the del /s /q but after that i got another error

F:\Button>npm run build

> [email protected] build
> del /s /q -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs

Invalid switch - "".

F:\Button>

Excellent video. Thanks for sharing.

Great video! I really thought rollup or webpack is a must. I have a problem though. I am publishing to npm with git but have error about using useState hooks. How can I fix this?

that s not good u need to add watch update on ur package because it s stupid run build every time u change any thing

Excellent tutorial. Learned a lot from it. Subscribed...:)

Can you please tell me how can i add css or scss files?

This video is perfect.
Recommended 100%. You don't even realize how many issues you avoid only by following this steps.

This is called a tutorial man!!!

when i am trying to use some image's and svg's its saying that webpackmodule missing, and if am using this className={classes.someClass} getting output just like this class=[object object] in another project can you help on this please

Thanks buddy, it was very helpful. 👍

Great tutorial mate! Can you also show how can we add icons and tailwindcss, I guess we will need webpack for that?!? Also a storybook will be great to have too!

So close! This is by far the most straight forward approach to library creation, especially given a smaller sized library.
After building a library using this approach, however, I found that I'm in need of including stylesheet (css) files in my component imports and the build as provided in this tutorial doesn't bundle them.
Any hints on how I might be able to do this without resorting to a full rollup bundler?

Please also show how to publish the package

What about css files it wont get copied or transpiled or compiled . Is there any solution for this?

Omg what a great video. I watched this now I am hacking the Pentagon!

That's great man, i appreciate your work. Keep it up!

Really appreciate this!

Thanks mate! Another great tutorial 🔥