Build a Component Library for React with Typescript [2021]
HTML-код
- Опубликовано: 12 сен 2024
- Today we are going to learn how to build a component library with react!
Github with all of the files you can copy pasta: github.com/joe...
Typescript Config Reference: www.typescript...
Video Info
Music by Tesko / prod. THXMOS:
/ @prod.thxmos6970
Support
Like this video? You can show your support by buying me a coffee ☕❤️: www.buymeacoff...
Socials
Github: github.com/joe...
Twitter: / thenerdycanuck
About The Channel
The knowledge that I share here is mostly from my personal experiences. I wouldn't say I'm a 20 year professional, rather I am just a DevOps / Software Engineer with a lot of experience who enjoys teaching what I know in my spare time. I believe that sharing some of my basic knowledge on this platform can help others get started. There are many ways to program something and the videos you see here are my take on the NodeJS / Typescript / and sometimes Unity world. If this channel helps you learn, or helps you think differently then my job is done 😊.
#react #componentlibrary #typescript
This video is perfect.
Recommended 100%. You don't even realize how many issues you avoid only by following this steps.
Glad you liked it.
@@TheNerdyCanuck hey! how are you?. me again.
Can I ask you a question? if you want to add an .css file, like styles.css, you have to add some sort of a plugin transpiler, right? if you use TSC build and you have an .css file, when you want to import that project in another one as a library you get an error that the specific .css file couldn't be found. You know if you can sort this error with TSC or I should move to an standar webpack configuration? thanks. Great videos!
14:40 Simpler override defaults:
Object.assign(defaultOptions, options)
You can also use Logical Assignment Operators, like:
_styles.color ??= color
That's great man, i appreciate your work. Keep it up!
thank you. very nice toturial.
Great Tutorial, 17:25 npm install from local package was what i wish to find for writing some unit test.
perfect, thanks a lot. you resolve my problem very well!!
Many thanks for this great tutorial! 🙏🏼
Excellent tutorial. Learned a lot from it. Subscribed...:)
Omg what a great video. I watched this now I am hacking the Pentagon!
Really great video. Thanks so much.
Excellent video. Thanks for sharing.
Thanks buddy, it was very helpful. 👍
Really appreciate this!
Thanks mate! Another great tutorial 🔥
Thanks a lot ,
Nice!! can you explain how to work with theme Dark and Light mode.
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 I was investigating a way to do it without webpack or rollup or external tools but it's looking more and more like we need to use it.
No big deal, I think I can make one like this to add css and extra assets (like icons, etc)
@@TheNerdyCanuck I managed to do it by using copy-files and I run it after the build scripts, but the downside is we can only use pure css and it’s not minified.
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?
Lol I was about to suggest rollup but let's avoid that.
As far as I know, tsc won't compile / transfer over CSS, so the only clean work around is creating objects of type React.CSSPropeties and putting those in TS files.
However, some people have 1k+ lines of CSS already, so I'll look into another way to get those CSS files over.
I suspect we could write a script that executes and transfers the CSS over to the appropriate spots and try that (or keep the CSS somewhere common the like root folder)
@@TheNerdyCanuck I started looking at styled-components and may continue, but yet one more concept to absorb. I just want css! 😆
@@karlkrasnowsky3895 at my startup, we use tailwind. we compile the tailwind first, then import the resulting output.css file like "import 'output.css';" in a .ts file. then in package json, we specify the ts file in the "files" param (shown in this video at some point if I recall) and everything's good to go. To be fair, we don't actually build our ui package. Instead we use turbo to transpile it into a nextJS workspace package, and everything just works. hope this helps or gives you ideas. best wishes.
@@OswaldChisala how did you do that? how did you compile tailwind and used it in your package?
thank you, but how to use tailwind or sass for this library?
but how do you test while developing a library
Thank you! Well done!
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.
If I want to use tailwindcss both in my component library and in the projects that are consuming it, how do I do that?
thank you
What about css files it wont get copied or transpiled or compiled . Is there any solution for this?
Personally I would write your CSS as typescript objects with the React.CSSProperties as it's type, but I can look into this for you.
@@TheNerdyCanuck Thank you for your time.
@@TheNerdyCanuck Interesting... so I too am looking at css/stylesheets and would be interested in this approach instead. However I can find little information on how to actually do this. Any pointers would be great.
Please I'm getting this error, after installing it locally to a react app
Cannot find module '25thandstaffing_ui' or its corresponding type declarations.
Did you find any fix for this?
This is called a tutorial man!!!
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?
It's a must if you want to use CSS and other files
can we use a Button from @mui/material/Button in this component library ?
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
SO right now, it's only built for ts and tsx files. IN order to add other things like images and CSS, we have to use webpack or rollup. I will make a follow up to this video showing how to do that hopefully in the near future, this is just a boilerplate to get you started.
@@TheNerdyCanuck Do you have video yet regarding images, css loading?
How do we compile assests, css/scss?
Would putting the react and react-dom in "peerDependencies" of the component library solve the problem of hooks you mentioned?
If you are referring to the problem of running it locally instead of installing it from source, no. You can try it though, if it works let me know!!
How to add ref for the components that we are created??
useRef I would imagine, but if you mean custom for our components, maybe I can make that in a future video
How can we add MIT licence in it ?
You can google the MIT and add it to github or have github generate it for you :)
Please also show how to publish the package
Sure, I can do that!
@@TheNerdyCanuck Please also show how to add .css file as a bunlde part of a component
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
> button-adv@1.0.0 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
> button-adv@1.0.0 build
> del /s /q -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs
Invalid switch - "".
F:\Button>
Use git bash, command prompt and powershell use different commands than I used.
@@TheNerdyCanuck it has failed to work on my side as well
did u find a solution?
"build":"rmdir /s dist && npm run build:esm && npm run build:cjs",
"build:esm":"npx tsc",
"build:cjs":"npx tsc --module CommonJS --outDir dist/cjs",
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
hey, any update on how to use scss modules (style.module.scss)
Unfortunately not yet
and add taiwind there?
I haven't gotten to it
@@TheNerdyCanuck Your video resolved one my big problem. But, My typos aren't exported. Have you any trick? I believe that is because My types are written in different files of components files, but I exported all types =/
Can you please tell me how can i add css or scss files?
You have to use something like rollup to package them for you. It can't be done this way unless you convert the css to actual objects in javascript.
Thank You.
i cant use this in windows:(
"build":"rmdir /s dist && npm run build:esm && npm run build:cjs",
"build:esm":"npx tsc",
"build:cjs":"npx tsc --module CommonJS --outDir dist/cjs",
Amazing tutorial. I didn't know that we can't use hooks while testing our package locally and I spent a lot of time in fixing that issue. I have a question, can you please help me with the below error that I am getting? I tried many solutionsbut none of them worked.
Module parse failed: Unexpected token (10:28)
File was processed with these loaders:
./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
Possibly forgot to add it to your peer dependencies?
You need rollup to bundle this library