Creating Your Own UI Library with React and TypeScript

Поділитися
Вставка
  • Опубліковано 4 лют 2025

КОМЕНТАРІ • 34

  • @mohammadanaskhan5294
    @mohammadanaskhan5294 7 місяців тому +5

    I normally don't comment under videos unless I have genuinely liked it.
    will just say - this is how tutorials must be!

  • @dennyrachmadi1391
    @dennyrachmadi1391 Рік тому +1

    I'm excited just by watching the title. kudo's added to my watch later

  • @SnehilCodes
    @SnehilCodes 3 роки тому +7

    Loved your video format. Short, informative and fun!

  • @nicolasomar
    @nicolasomar 2 роки тому +2

    Nice way to introduce how to create a library. You go to the simplest way without publishing or link it to a repo.
    Also I liked the humor,.

  • @imagine_9620
    @imagine_9620 3 роки тому +2

    Lol ,remembering this video and rewatching it actually saved me a lot of time. Thx a lot, a 100% like and subscribe scenario :).

  • @Kwuasimoto
    @Kwuasimoto Рік тому +1

    Bayan I just wanted to say I appreciate the effort you put in to make your video's enjoyable and educational. You provide great content sir

  • @andrewiglinski148
    @andrewiglinski148 11 місяців тому +1

    Dude this is the best video on this topic on the youtube. It's been a long time since I had to watch a tutorial on something related to React, and people just f-3king go on, and on, and on... like dude.... we don't need to know what typescript is... just show us where you found the configs and what worked for you lol. Either way, I appreciate the help.

  • @tszhong0411
    @tszhong0411 Рік тому +1

    Thank you! This is the video I wanted to watch. I am trying to create my own UI library and started referring to other repositories. However, I have no idea what they do. You have saved me time. ❤

  • @sandeepsirohi8434
    @sandeepsirohi8434 Рік тому +1

    Thanks man.
    Its really so easy!! 😃

  • @aleksamitic6655
    @aleksamitic6655 Рік тому

    Great video mate! Keep it up

  • @alfredasare5870
    @alfredasare5870 3 роки тому +2

    Niiiiice. Love your explanation.

  • @jairoo4716
    @jairoo4716 2 роки тому +1

    really good content, keep it up

  • @JawsoneJason
    @JawsoneJason Рік тому

    Wow, this was amazingly simple!
    One question: Can we also include storybook in this same repo? I feel like that might complicate this a bit, though?

  • @jaisonj3056
    @jaisonj3056 Рік тому

    Nice video.
    I have a small doubt, what if we want to add more components such as input, dropdown, etc, in a single library. How to approach this situation.

  • @iamstrom518
    @iamstrom518 10 місяців тому

    Have you ever tried using useRef() or useMemo() on your own ui library? Then when you import your component, you got this error: `Uncaught TypeError: Cannot read properties of null (reading 'useRef')`

  • @AlemaoRetroGamer
    @AlemaoRetroGamer 2 роки тому +1

    Thanks for video, it possible with tailwind? can you make a video?

    • @BayanBennett
      @BayanBennett  2 роки тому +1

      Definitely possible with tailwind, but I'll leave the video to someone else ;)
      There seem to be some UI libraries that are using tailwind, those would be a good place to start

  • @alexodan
    @alexodan Рік тому +1

    cool tutorial bro, it would be nice if u show how to export types, u know the .d.ts file and styles cheers (halp me pls im struggling)

    • @BayanBennett
      @BayanBennett  Рік тому

      Are you making the .d.ts files manually or generated by enabling declarations in tsconfig (www.typescriptlang.org/tsconfig#declaration)?

  • @kaydenhardcastle
    @kaydenhardcastle 2 роки тому +1

    Love this, thank you!
    what about using a scss file instead of styled components? I seem to have an issue importing/using external scss documents in an NPM package

    • @BayanBennett
      @BayanBennett  2 роки тому +1

      Depending on how your project is set up, you will most likely need to add something to transpile SCSS down to CSS. If you're using webpack, `sass-loader`(webpack.js.org/loaders/sass-loader/), or for create react app `sass` (create-react-app.dev/docs/adding-a-sass-stylesheet/). For my project, I'm not bundling anything, so I would just package the SCSS files and let the project that is using my UI library deal with the transpilation of SCSS ➡ CSS.

    • @kaydenhardcastle
      @kaydenhardcastle 2 роки тому +1

      @@BayanBennett I will look into it, thanks! I’m not too familiar with webpack currently

  • @sagemik69
    @sagemik69 2 роки тому

    I have error Cannot find module '@Coradion/ui' or its corresponding type declarations. It is ok to import like this import {Button} from '@Coradion/ui' when there is src folder.

    • @BayanBennett
      @BayanBennett  2 роки тому +1

      Here's a the place where I used the library: github.com/coradion/www/blob/main/src/components/icon-button.tsx
      It's not a great example of using a UI library component right now, but at least the project setup is different.

  • @Cowglow
    @Cowglow 5 місяців тому

    👏👏👏

  • @StrawbrryFrap
    @StrawbrryFrap 3 роки тому +2

    Neat! :3

  • @codingman8056
    @codingman8056 2 роки тому

    video sucks , stop overacting , explain the topic properly

    • @BayanBennett
      @BayanBennett  2 роки тому +1

      There are plenty of other channels for that

    • @saiverx
      @saiverx 2 роки тому

      I actually found it super easy to follow and it gave me just enough information to get me started. Sucks to suck 🤷‍♂🤷‍♂

    • @syedhamza6779
      @syedhamza6779 8 місяців тому

      Video's Great, no overacting, topic explained easily