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 UA-camrs, 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 😊👌
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
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
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 !
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
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 😊
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!
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 😅
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 ~ 😊
@@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 :)
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 😍
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
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
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"
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
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 😀😊
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.
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? 😊
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
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
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 😊
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 😊
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 😊
![Build a Component Library for React with Typescript [2021]](/img/n.gif)
All appreciation for your complete and excellent explanation
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 UA-camrs, 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 😊👌
Thank you very much 😍😍❤️
+1
Thank you Bruno.
great video. I've just published my first package.
That's very very nice, awesomeeee!!! 😀😀
Obrigado Bruno. You are 1 in a million. Always happy. Take care my friend. Greetings Ali.
Thank you my friend, you too are one in a million Ali! 😍😍😍
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
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!
Glad it helped my friend! =D
I watched the whole video.
And you explain very well.
Thanks!
Thanks Bruno :)
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
Thank you 😍 testing will come sooner or later 😅
It was a really helpful video!
Thank you, very much!!!
Thank you
Bruno your skin is so smooth. why 😂 ~ I love your content though you’re a lifesaver
Great video, thanks Bruno!
Thank you my friend 😀
Thanks! It works like a charm!
I'm very happy to read that Juan 😍😍 thank you ❤️
Thank you soo much. You're a life saver.
Very happy to read your comment 😍 thank you my friend 😊
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 !
mas pelo amor de deus se voce gravar um video em portugues vou fica muito feliz :)
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
Thanks for sharing! Great content! This utility (tsdx) it's awesome!!
Grettings from Argentina!
I love it a lot 😍 every single time I create a new library at work this is my go-to choice 😊
Love to Argentina 😍😍😍🇦🇷🇦🇷🇦🇷
Muito bom Bruno, show de bola!
Muito obrigado Pablo 😍😉😉
you are awsome man☺☺👍👍
You are awesome as well my friend 😍
Great! You could turn this into a mini series.
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"? 😅😅
@@BrunoAntunesPT I let it slide this time hehe
@@narcissisticnarcissus4956 ahahah 🤣🤣
Amazing video man i was much in need of this but i don't know ts i only know js
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 😊
Thanks @bruno for all your amazing videos. Can you please also make one on storybook ;)
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 😅😅)
How to resume a week of pain trying to comprehend and adapt the outdated official storybook doc in less than 15minutes. Thanks a lot :)
That's a great video. How do we add CSS? What are things that need to be changed in test.tsx?
Thanks for the amazing tutorial.
I have question. I want to build an package that includes api fetching. Can I use rtk query here?
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!
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 😅
Thanks for sharing, it's really awesome, can you do a demo for postcss in tsdx, I'm facing lot of issue
They have an example in the docs over here tsdx.io/customization
Does this help? 😊
Great one Bruno! How would I add styled-components so I could create my exported components with it?
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 ~ 😊
@@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 :)
@@BrunoAntunesPT By the way, how can I make a website that looks like tsdx.io to share my librarie's documentation? Thanks
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 😍
This is the repository root github.com/formium/tsdx/tree/master/website
Great explanation. Question what is the difference between using tsdx for build vs Rollup for build?
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
Hey, how can I use this for a React Native Component library?
where have u been? missed u ;)
I missed you too 😍 To be 100% honest with you, I have been very busy with other stuff outside of UA-cam 😅😅
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
To be honest with both of you I have never used chakra, so I don't know the limitations 🙂 I mostly use material-ui 🙂
Hi, Does anyone know if it is possible to use FluentUi or MaterialUi and use them in the components of my library?
Yes you can, just add those libraries as peerDependencies in your library - avoid putting them as dependencies and you will be good to go 😊
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"
What are the alternative?
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
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 😀😊
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.
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? 😊
How to run story book from here?
Is there a js version of this?
Tsdx only works with typescript 🙂
@@BrunoAntunesPT is there any similar tool for javascript?
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
@@BrunoAntunesPT project requirement, thanks!
Makes sense 🙂 give a try with microbundle I have heard very good things about it 🙂
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
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
😊
@@BrunoAntunesPT can we use in angular also or react only ?
@@BrunoAntunesPT and thank you for quick reply 😊😊
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 😊
angular.io/guide/creating-libraries
TSDX and create-react-library are now deprecated
Where did you see that tsdx is deprecated? 😊
@@BrunoAntunesPT check the repo, it won't be maintained anymore, there is a fork btw
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 😊
Sadly the creator never replied on that thread - we should probably assume the silence as a sign it's deprecated 😅
@@BrunoAntunesPT thanks for replying. It would be good if you could do a video for microbundle or such to consider as a replacement.
hhhhhhhhhhhhhhhhhhh wjeh zeb