Create and Publish packages to npm - React Component Library using tsdx

[@mansafamara]

Bruno your skin is so smooth. why 😂 ~ I love your content though you’re a lifesaver

[@codewithguillaume]

Thanks Bruno :)

[@DesignDensity]

Thank you, Bruno, you explain things in a very unique way, you absolutely put yourself in your viewers' shoes and explain from that perspective which is not something we could find with other KZbinrs, I'm glad I came across your this video to lead me to your channel. This channel deserves 100K+ subs. Thank you so much for the time and effort, Bruno. You now have 1 more subscriber 😊👌

[@BrunoAntunesPT]

Thank you very much 😍😍❤️

[@somerandomchannel382]

+1

[@khoudiryaya3515]

Thank you Bruno. great video. I've just published my first package.

[@BrunoAntunesPT]

That's very very nice, awesomeeee!!! 😀😀

[@ahmedelnawawy2458]

All appreciation for your complete and excellent explanation

[@endizhupani2628]

Wow, I spent hours trying to get the typescript components to publish on npm until I found this ang it done in 5 mins. Thanks!

[@BrunoAntunesPT]

Glad it helped my friend! =D

[@mhmtlgly]

Obrigado Bruno. You are 1 in a million. Always happy. Take care my friend. Greetings Ali.

[@BrunoAntunesPT]

Thank you my friend, you too are one in a million Ali! 😍😍😍

[@fagundezantony2358]

Thanks for sharing! Great content! This utility (tsdx) it's awesome!! Grettings from Argentina!

[@BrunoAntunesPT]

I love it a lot 😍 every single time I create a new library at work this is my go-to choice 😊 Love to Argentina 😍😍😍🇦🇷🇦🇷🇦🇷

[@ismoilshokirov]

Mr. Bruno Thank you so much for your lessons, they have really improved my skills during this last year. I am looking forward to a video about the testing of Next JS apps. Thank you

[@BrunoAntunesPT]

Thank you 😍 testing will come sooner or later 😅

[@mdkawsarislamyeasin4040]

I watched the whole video. And you explain very well. Thanks!

[@bbrrsolutions]

Hi Bruno, excellent video, nice to know another Bruno also related with the web development, Continue with this excellent content, Cheers! Note: Mi name is also Bruno, maybe the account doesn't display it

[@sarnyaia1]

It was a really helpful video! Thank you, very much!!!

[@BrunoAntunesPT]

Thank you

[@monikapatel6464]

Thanks @bruno for all your amazing videos. Can you please also make one on storybook ;)

[@BrunoAntunesPT]

Thank you very much ❤️ I'll take the suggestion, but I will be honest, I have quite a few videos ahead of that one (sorry 😅😅)

[@kanijo181920]

Grande bruno fazia tempo que nao via um video seu devido trabalho, por acaso to precisando criar uma biblioteca de components para projeto na empresa e olha cai em ti denovo, forte abraço amigo portugues !

[@kanijo181920]

mas pelo amor de deus se voce gravar um video em portugues vou fica muito feliz :)

[@BrunoAntunesPT]

Muito obrigado Kelvin =D Estou ha bastante tempo a pensar criar um canal em Portugues, mas nunca tive "coragem" de o fazer. Achas que as pessoas no Brasil percebem bem o sotaque de Portugal? (Este tem sido o meu maior medo de criar um canal em Portugues) =D

[@joshuafrankle9474]

That's a great video. How do we add CSS? What are things that need to be changed in test.tsx?

[@Harsh-df9vp]

Thank you soo much. You're a life saver.

[@BrunoAntunesPT]

Very happy to read your comment 😍 thank you my friend 😊

[@narcissisticnarcissus4956]

Great! You could turn this into a mini series.

[@BrunoAntunesPT]

Thank you 😀 Next week I'll release a video publishing to npm using github actions and semantic-release. Can we call 2 videos "a mini series"? 😅😅

[@narcissisticnarcissus4956]

@@BrunoAntunesPT I let it slide this time hehe

[@BrunoAntunesPT]

@@narcissisticnarcissus4956 ahahah 🤣🤣

[@ielijose]

Great video, thanks Bruno!

[@BrunoAntunesPT]

Thank you my friend 😀

[@Gasshette]

How to resume a week of pain trying to comprehend and adapt the outdated official storybook doc in less than 15minutes. Thanks a lot :)

[@pranavpatel2810]

Amazing video man i was much in need of this but i don't know ts i only know js

[@BrunoAntunesPT]

Awesome 😀 If you are building a library that you want to share with other people I recommend TypeScript. If for nothing else, because people consuming your library will be expecting typings nowadays 😊

[@juancarlosdelamarca4815]

Thanks! It works like a charm!

[@BrunoAntunesPT]

I'm very happy to read that Juan 😍😍 thank you ❤️

[@PabloGeokar]

Muito bom Bruno, show de bola!

[@BrunoAntunesPT]

Muito obrigado Pablo 😍😉😉

[@kumarravi525]

you are awsome man☺☺👍👍

[@BrunoAntunesPT]

You are awesome as well my friend 😍

[@pradella]

Thanks Bruno! Such amazing presentation! It's helping me a lot! I was wondering if it's possible to add tsdx to an existing react-typescript project. I will try here!

[@BrunoAntunesPT]

Thank you very much ❤️ I only added tsdx to an existing project once. Usually I always start from fresh. At the time, honestly I found easier to create a new project, and "copy" the boilerplate - I'm sure there are smarter and more efficient ways to do it, but because I don't need that specific use case often, I never went deeper into the subject, sorry 😅

[@jahidunnurmaheeofficial2089]

Thanks for the amazing tutorial. I have question. I want to build an package that includes api fetching. Can I use rtk query here?

[@subhranshudas8862]

Great explanation. Question what is the difference between using tsdx for build vs Rollup for build?

[@ranjithvijayakumar4932]

Thanks for sharing, it's really awesome, can you do a demo for postcss in tsdx, I'm facing lot of issue

[@BrunoAntunesPT]

They have an example in the docs over here tsdx.io/customization Does this help? 😊

[@maresstefan3391]

Great video, but I've waited hours for tsdx to install the dependencies and nothing happened. I tested that I have a good and fast internet connection and that was not the issue

[@mugiwaranoDave]

Great one Bruno! How would I add styled-components so I could create my exported components with it?

[@BrunoAntunesPT]

Thank you 😊 You can use it normally in your components without any problem. The only detail is that in your package.json don't add it to dependencies. Add it in the peerDependencies and devDependencies 😊 If you put it in dependencies then your library will bundle the full styled components with it, which you don't want, you want to use the version available in the users application 😊 Keep the peer Dependency version very loose usually with > instead of ^ or ~ 😊

[@mugiwaranoDave]

@@BrunoAntunesPT You just saved me tons of time with it. TSDX is awesome and you are way more! Subscribed and will follow your content. Keep spreading knowledge and smiles Bruno. Thanks :)

[@mugiwaranoDave]

@@BrunoAntunesPT By the way, how can I make a website that looks like tsdx.io to share my librarie's documentation? Thanks

[@BrunoAntunesPT]

The tsdx website is a nextjs app using markdown for their pages. I have never looked into what they did, but luckily it is open source github.com/formium/tsdx/blob/master/website/pages/index.mdx 😍

[@BrunoAntunesPT]

This is the repository root github.com/formium/tsdx/tree/master/website

[@sky_kryst]

Hey, how can I use this for a React Native Component library?

[@finguerr]

if you want to use hooks into of your package, would you do ?? or you will have error of Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

[@BrunoAntunesPT]

I don't fully understand what you want to ask... Can you elaborate a bit more? If you want to ask about using hooks in a library, the rules are exactly the same as in using hooks in an application 😊 You can use hooks inside components, or export custom hooks for people to use on their apps 😊 Does this answer your question? 😊

[@franciscokloganb]

Note of warning, tsdx is not maintained. Has not been update in two or three years. There is not replacement for it, but you get pretty close with "microbundle"

[@HidaytRahman]

What are the alternative?

[@saisagarsharma]

where have u been? missed u ;)

[@BrunoAntunesPT]

I missed you too 😍 To be 100% honest with you, I have been very busy with other stuff outside of KZbin 😅😅

[@jahidunnurmaheeofficial2089]

How to run story book from here?

[@RandomMcLain]

Hello, Bruno (and others too)! I had a problem trying to use ChakraUI on the TSDX react-with-storybook template, everything worked until I added chakra UI. Is anybody experimenting the same issue? By the way, thanks A LOT for the video Bruno, I spent days trying to build a component library by myself, and TSDX has everything I need out of the box, I never heard about this great tool. I just need it to work with ChakraUI

[@BrunoAntunesPT]

To be honest with both of you I have never used chakra, so I don't know the limitations 🙂 I mostly use material-ui 🙂

[@carlosivanmontesdiaz1491]

Hi, Does anyone know if it is possible to use FluentUi or MaterialUi and use them in the components of my library?

[@BrunoAntunesPT]

Yes you can, just add those libraries as peerDependencies in your library - avoid putting them as dependencies and you will be good to go 😊

[@mohdsajidshaikh4291]

See you after long time. Hey please explain how to implement ads like adsense, popads and jnfolinks in nextjs or react js. Because there are many requirements for placing ads on websites but adsence is possible but not everyone wants so please explain popads and infolinks so it's solved and easy for other also according to requirements. Please make it

[@BrunoAntunesPT]

I'm not currently using adsense, but I can point you to a place that might help you (hopefully) github.com/vercel/next.js/discussions/18801 Let me know if that helps 😀😊

[@EliuTimana]

TSDX and create-react-library are now deprecated

[@BrunoAntunesPT]

Where did you see that tsdx is deprecated? 😊

[@EliuTimana]

@@BrunoAntunesPT check the repo, it won't be maintained anymore, there is a fork btw

[@BrunoAntunesPT]

Where did you see it will not be maintained anymore? Can you share some official info? I'm not saying you are wrong, I just want some confirmation from the creators that it's deprecated and I can't find anything 😊 PS - Just because there are no commits recently, doesn't mean a repository or library is deprecated 😊

[@BrunoAntunesPT]

Sadly the creator never replied on that thread - we should probably assume the silence as a sign it's deprecated 😅

[@mukaofssn]

@@BrunoAntunesPT thanks for replying. It would be good if you could do a video for microbundle or such to consider as a replacement.

[@kumarravi525]

hello sir can you please make a library using typescript and use in react js like component different different component which belongs to library.... please help me i need your help thank you

[@BrunoAntunesPT]

If I understand correctly what you asked, that's exactly what we did in this Video. We created a library in React and typescript and published to npm. Now, that library can be consumed from react applications doing an npm install 😊

[@kumarravi525]

@@BrunoAntunesPT can we use in angular also or react only ?

[@kumarravi525]

@@BrunoAntunesPT and thank you for quick reply 😊😊

[@BrunoAntunesPT]

I don't do angular for quite a while, but if I remember correctly they had something called the angular package format... If I'm not mistaken they have that built into the angular cli by now, but as I said, I don't angular for a very long time now 😊

[@BrunoAntunesPT]

angular.io/guide/creating-libraries

[@Wakkyguy]

Is there a js version of this?

[@BrunoAntunesPT]

Tsdx only works with typescript 🙂

[@Wakkyguy]

@@BrunoAntunesPT is there any similar tool for javascript?

[@BrunoAntunesPT]

I think microbundle does, but I have never used it myself. Can I ask why you don't want to build your libraries in typescript? 🙂 github.com/developit/microbundle

[@Wakkyguy]

@@BrunoAntunesPT project requirement, thanks!

[@BrunoAntunesPT]

Makes sense 🙂 give a try with microbundle I have heard very good things about it 🙂

[@elab4d140]

hhhhhhhhhhhhhhhhhhh wjeh zeb