Build a Component Library for React with Typescript [2021]

No video

Build a Component Library for React with Typescript [2021]

Рет қаралды 24,843

Күн бұрын

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

Пікірлер: 74

@lucaford2598 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

Glad you liked it.

@lucaford2598 2 жыл бұрын

@@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!

@rodrigonovais9624 Жыл бұрын

14:40 Simpler override defaults: Object.assign(defaultOptions, options) You can also use Logical Assignment Operators, like: _styles.color ??= color

@farsal6271 Жыл бұрын

Great Tutorial, 17:25 npm install from local package was what i wish to find for writing some unit test.

@justinwang9660 3 ай бұрын

thank you. very nice toturial.

@johnmark-ps8jy 2 жыл бұрын

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

@user-fo4wu5tj7k 10 ай бұрын

perfect, thanks a lot. you resolve my problem very well!!

@Minecraftzocker766 Жыл бұрын

Many thanks for this great tutorial! 🙏🏼

@sumitwadhwa8823 2 жыл бұрын

Excellent video. Thanks for sharing.

@ankitmehrotra8519 2 жыл бұрын

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

@daniel84136 Жыл бұрын

Really great video. Thanks so much.

@igordztv 2 жыл бұрын

Really appreciate this!

@madmax4788 2 жыл бұрын

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

@karlkrasnowsky3895 2 жыл бұрын

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?

@TheNerdyCanuck 2 жыл бұрын

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)

@karlkrasnowsky3895 2 жыл бұрын

@@TheNerdyCanuck I started looking at styled-components and may continue, but yet one more concept to absorb. I just want css! 😆

@OswaldChisala Жыл бұрын

@@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.

@parsa264 4 ай бұрын

@@OswaldChisala how did you do that? how did you compile tailwind and used it in your package?

@manudrlng1569 2 жыл бұрын

Thanks buddy, it was very helpful. 👍

@zlatkoiliev8927 2 жыл бұрын

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!

@TheNerdyCanuck 2 жыл бұрын

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)

@zlatkoiliev8927 2 жыл бұрын

@@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.

@ALFREDVPAUL 9 ай бұрын

Nice!! can you explain how to work with theme Dark and Light mode.

@parsa264 4 ай бұрын

thank you, but how to use tailwind or sass for this library?

@bo4695 2 жыл бұрын

Thanks mate! Another great tutorial 🔥

@ravitandon9351 Жыл бұрын

Thank you! Well done!

@aalhommada5675 Жыл бұрын

Thanks a lot ,

@gangstacoder4234 4 ай бұрын

but how do you test while developing a library

@anirbansamaddar6214 Жыл бұрын

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.

@stanleyfestus5599 2 жыл бұрын

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?

@TheNerdyCanuck 2 жыл бұрын

It's a must if you want to use CSS and other files

@brychanmd Жыл бұрын

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

@charansrinivas3149 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

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.

@charansrinivas3149 2 жыл бұрын

@@TheNerdyCanuck Thank you for your time.

@karlkrasnowsky3895 2 жыл бұрын

@@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.

@nazarkravchenko6891 Жыл бұрын

thank you

@user-tq4gt6ol9x 9 ай бұрын

Please I'm getting this error, after installing it locally to a react app Cannot find module '25thandstaffing_ui' or its corresponding type declarations.

@namdgdhfjdj 6 ай бұрын

Did you find any fix for this?

@phiyoutube3422 Жыл бұрын

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

@CodeDreamer68 Жыл бұрын

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

@TheNerdyCanuck Жыл бұрын

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!!

@scratchcoding7690 2 жыл бұрын

This is called a tutorial man!!!

@vishwasvishu3282 11 ай бұрын

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

@TheNerdyCanuck 5 ай бұрын

useRef I would imagine, but if you mean custom for our components, maybe I can make that in a future video

@prathapreddy244 Жыл бұрын

How do we compile assests, css/scss?

@tmnrp 2 жыл бұрын

Please also show how to publish the package

@TheNerdyCanuck 2 жыл бұрын

Sure, I can do that!

@tmnrp 2 жыл бұрын

@@TheNerdyCanuck Please also show how to add .css file as a bunlde part of a component

@irtazahussain8118 2 жыл бұрын

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>

@TheNerdyCanuck 2 жыл бұрын

Use git bash, command prompt and powershell use different commands than I used.

@balimuttajjofrancis1002 Жыл бұрын

@@TheNerdyCanuck it has failed to work on my side as well

@balimuttajjofrancis1002 Жыл бұрын

did u find a solution?

@parsa264 4 ай бұрын

"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",

@neeswebservices Жыл бұрын

How can we add MIT licence in it ?

@TheNerdyCanuck Жыл бұрын

You can google the MIT and add it to github or have github generate it for you :)

@somhrikkonar6147 Жыл бұрын

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

@TheNerdyCanuck Жыл бұрын

Unfortunately not yet

@kamalkamals 2 жыл бұрын

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

@rajshah2644 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

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.

@rajshah2644 2 жыл бұрын

Thank You.

@principe.borodin Жыл бұрын

and add taiwind there?

@TheNerdyCanuck Жыл бұрын

I haven't gotten to it

@principe.borodin Жыл бұрын

@@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 =/

@ovshar_Sarabi Жыл бұрын

i cant use this in windows:(

@parsa264 4 ай бұрын

"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",

@nishantsharma4427 2 жыл бұрын

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.

@TheNerdyCanuck 2 жыл бұрын

Possibly forgot to add it to your peer dependencies?

@ivobabailan3020 2 жыл бұрын

You need rollup to bundle this library

@manudrlng1569 2 жыл бұрын

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

@TheNerdyCanuck 2 жыл бұрын

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.

@prathapreddy244 Жыл бұрын

@@TheNerdyCanuck Do you have video yet regarding images, css loading?