Это видео недоступно.
Сожалеем об этом.

React Select Example | React Dropdown Menu - Fully Customizable

Поделиться
HTML-код
  • Опубликовано: 12 авг 2024
  • Here is a React select example with different use cases. We will build React select with a single value, React multiselect with an array and React select async which will load data from API. Our React dropdown menu will be also creatable to be able to add custom options.
    TIMESTAMPS
    0:00 Introduction
    1:03 React select example
    2:39 React multiselect
    3:28 React select async
    7:57 Styling React dropdown menu
    12:57 Creatable React select
    ► CHECK MY COURSES - monsterlessons-academy.com/co...
    FOLLOW ME
    ► TWITTER - / monster_lessons
    REFERENCES
    ► Source code - github.com/monsterlessonsacad...
    RECOMMENDED VIDEOS
    ► My editor setup for web development - • Best Text Editor for W...
    ► Angular Tutorial for Beginners - • Angular Tutorial for B...
    ► Vue JS Crash Course - • Vue JS Crash Course fo...
    ► React Hooks Full Course - • React Hooks Tutorial f...
    ► Typescript Course for Beginners - • Typescript Crash Cours...
    ► Build a Todo App with Angular - • Build a Todo App With ...
    ► Creating custom select library - • Custom Javascript Drop...
    ► HTML Price comparison - • Practice CSS and HTML ...
    ► How to build Quiz with React hooks - • How to Build a Quiz Wi...
    MY COURSES
    ► NestJS course - • Next JS for Beginners ...
    ► Docker + Docker compose course - • Docker Compose Tutoria...
    ► Angular + NgRx course - • Angular Course 2021 - ...
    ► Vue + Vuex course - • Vue Course With Projec...
    ► React hooks course - • React Hooks tutorial b...

Комментарии • 89

  • @KibototV2
    @KibototV2 2 года назад +16

    I think your content is high level, you're providing useful information - at least to me, as a mid frontend developer. I haven't noticed how many subscribers you have or the views on the videos until now, but now when I've noticed it - you should have a lot more people following you in terms of content quality.
    There's quite a lot time making content, filming it, editing and being consinstent. Thanks for your time and I hope you'll read this and make your day a bit better. Cheers from Croatia!

  • @VizualAbstract
    @VizualAbstract Год назад +2

    Excellent video. No fluff, straight forward, clear, comprehensive, and to the point. Well done.
    I know many videos cover creating a select from scratch, but in the real-world, you often rely on libraries and don't have time to re-create the wheel when when there's excellent, industry-tested libraries like this. The problem is that sometimes these libraries are complex and their documentation is awful, or lacking!
    So this is fantastic! Libraries for surprisingly complex features like this are important.
    For this library though, I would consider adding an addendum video covering the "components" property, allowing users to replace specific components.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Thanks for the idea!

    • @thelatelateshowwithmaaz6260
      @thelatelateshowwithmaaz6260 Год назад

      @@MonsterlessonsAcademy Sir i dont know why but when i click on option useState is not changing from true to false i dont know why
      plz help me sir

  • @souviknag
    @souviknag 10 месяцев назад +1

    15minutes of pure knowledge! Thank you so much

  • @user-ew5ot5mi2j
    @user-ew5ot5mi2j Год назад

    Great course with clear grammar explanations.

  • @laagodfather4435
    @laagodfather4435 Год назад +2

    I'm really grateful to you, man, for this wonderful explanation.
    According to KibototV2, your content is of a very top quality, and you should be followed by a lot more people.

  • @user-zq2cb4fi9f
    @user-zq2cb4fi9f Год назад

    Oh my god i was searching a way how to create at dropdown for one week i am so so glad to meet you sir so thank you 🙇🙇

  • @MarijaniNyindo
    @MarijaniNyindo Месяц назад

    Bro, this is great! Thanks

  • @ejikeezekwunem4162
    @ejikeezekwunem4162 Год назад

    Very clear and straight to the point. Thank you so much.

  • @ramizkhan3967
    @ramizkhan3967 3 месяца назад

    Excellent video my friend.

  • @OnlineZiggasa
    @OnlineZiggasa Год назад

    I need input border or outline 0

  • @kanishkayadav4257
    @kanishkayadav4257 3 месяца назад

    How do we reduce the box height and ceter the drop-down arrow after reducing height

  • @timothyvandeweerd946
    @timothyvandeweerd946 2 года назад

    Thank you, this was a great tutorial. Much appreciated.

  • @CuriousContours1475
    @CuriousContours1475 5 месяцев назад

    How to display the all options value in.field in Multi select . Before multi select i have one drop down based on that drop-down option i will generate the options of multi select value should be by default selected in the field

  • @antoniszachos9005
    @antoniszachos9005 2 года назад

    Congrats !!!! High level tutorial

  • @quantumthoughts2698
    @quantumthoughts2698 Год назад

    How to create chart(bar/line) graph, after selecting values from Drop-down from api?

  • @renaldiaryaputra5976
    @renaldiaryaputra5976 10 месяцев назад

    Hello, how can i select value instead of object to post to API
    Thank you

  • @wayneswildworld
    @wayneswildworld Год назад

    Is there a way to manually update the value of a react-select ? without adding a value field?

  • @escoladejesusnafreguesiado3319

    Greate Video!!!
    How can i add buttons on top of options?

  • @simransingh2832
    @simransingh2832 Год назад

    Great Video! But I have a query related to creatableSelect, I need to show already selected options in inputfield of creatable select. I have set it in the options state, but i still see no options already selected in the inputField of creatable, can you help me out on this?

  • @hajjejaymen8562
    @hajjejaymen8562 Год назад

    Hi Oleksander, I would like to ask you for example I have a mern project to create a movie DB and I have to choose from react-select only one genre for each movie and can't be repeated ???

  • @manasahr430
    @manasahr430 Год назад

    hi please make a video on dependent dropdown using fetch api data and react hook.

  • @mfion1
    @mfion1 Год назад

    What if i have a paginated api and i want to load page 2 as i scroll down?

  • @quangtrungtran7480
    @quangtrungtran7480 Год назад

    i cant reset display select when i reset state. but reset just as I wanted. please everyone help me

  • @HarishGGU
    @HarishGGU Год назад

    Thank you so much very helpful

  • @sadboi2003
    @sadboi2003 Год назад

    Hello Guys! Can you show me how to use React-select with Search Button ?

  • @toluwaseomojiba776
    @toluwaseomojiba776 Год назад

    Really great tutorial, my question is, can I use formik to handle validation, onChange and onSubmit with this component...have you worked on something like this before?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Hi, it is completely possible. You just provide a custom component in formik Field which gets options, field, form and you return react-select there.

  • @ericdecolsales3066
    @ericdecolsales3066 Год назад

    showing how to change the styles on focus would be a bonus2x, i'm crazy after how i can do it, the documentation it's just not that great. But your video helped me a lot, thank you

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Sorry I can't recommend anything as I didn't solve such problems in react-select

    • @adeleke5140
      @adeleke5140 11 месяцев назад

      I have a solution, all you need to do is to target the component you want to style and then call the state.isFocused method

  • @milosignjatovic6088
    @milosignjatovic6088 Год назад

    Nice video man. One question though, how to disable their hover styles? Their documentation is really bad in my opinion...styling aspect was covered terribly. Besides "isSelected" and "isFocused" how am I supposed to know which other states are there?

  • @bmtamim7818
    @bmtamim7818 9 месяцев назад

    Hi sir, Thanks for this amazing video.
    React select has one issue: i can't make deadt selected option by value, they need value,label go make selected. its needed when you have only id from database.
    example:
    const countries = [
    { value: "MG", label: "Madagascar", icon: MgIcon },
    { value: "UE", label: "Union Européenne", icon: UeIcon },
    { value: "BD", label: "Bangladesh", icon: UeIcon,sele:true}
    ];
    ({
    ...base,
    display: "flex",
    alignItems: "center"
    })
    }}
    components={{
    Option,
    MultiValue
    }}
    />
    it should select UE, but its not working like this, they need { value: "UE", label: "Union Européenne", icon: UeIcon } this.
    DO you have any solutio? sir

  • @nikolaganev6216
    @nikolaganev6216 Год назад

    Thanks to this video I was able to create the exact reusable drop down I wanted. Thank you so much. But now I can't seem to extract the selected value to use it in the parent component. Do you have an example of how to forward the ref to a reusable react-select component and the selected value back in the parent component ?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Hi, you set your state outside of react-select and in onChange function of it you update your state. So your state is not related to react-select at all and you can share it in any way.

  • @lasaventurasdesiulppe9326
    @lasaventurasdesiulppe9326 Год назад

    amazing

  • @DevSprint
    @DevSprint Год назад

    Great,
    help!
    problem: how to align left the single value and placeholder like you, I did it same like you, but w my select placeholder and single value are in center.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Hi, no idea but you can take the source code in the description to get the same result.

    • @DevSprint
      @DevSprint Год назад

      @@MonsterlessonsAcademy
      thanks you,
      I got the solution

  • @gouthammanigonda6347
    @gouthammanigonda6347 Год назад

    how to include image in the label

  • @SajidAliSoftwareEngineer
    @SajidAliSoftwareEngineer Год назад

    Hi what IDE are you using? looking nice, can you please share how to setup?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Hi, I already covered that
      ruclips.net/video/j6uqOvTRq6I/видео.html
      ruclips.net/video/YrLiugDhCuk/видео.html
      ruclips.net/video/Xa4aOOB7XZo/видео.html

  • @TheSmashten
    @TheSmashten 8 месяцев назад

    Thanks for the video, but it did not help me. I am trying to make it so my select box does not increase in size as options are added and so that the height can be manipulated of the select box itself. Working with react-select is tough! Not a very good library imo.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  8 месяцев назад

      I don't know any library which is better. If you need it super customizable then you can just build it yourself.

  • @nikolaganev6216
    @nikolaganev6216 Год назад

    Thank you, this was very helpful! I was also looking for a way to customize the arrow in the react select drop down. Do you know if it is possible?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Hi I didn't try that. You need to check documentation.

    • @nikolaganev6216
      @nikolaganev6216 Год назад

      @@MonsterlessonsAcademy Thank you for the response.

    • @Chiaros
      @Chiaros Год назад

      @@nikolaganev6216 Hey, did you find which part of the documentation actually refers to this? It's quite the mess. I want to remove the arrow entirely.

  • @mdmasudrony6588
    @mdmasudrony6588 Год назад

    Thanks man

  • @EdwarRinaldo
    @EdwarRinaldo Год назад

    Hallo, great video thanks,. hhmm, i have once question for CRUD process, how to set value the react-select after we load data from API. In case i use react-hook-form...
    can you give me a solution, i'm stuck here...
    many thanks...

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Hi, you set a value in react-select and then in onChange you just update your state outside of the component. In this way it doesn't matter what you use outside of react-select

    • @EdwarRinaldo
      @EdwarRinaldo Год назад +1

      @@MonsterlessonsAcademy hi, the problem is when i not change react-select when data incoming from API then i submit data and state is always null.. except i change the react-select the state not empty...

  • @nerminsamedova790
    @nerminsamedova790 2 года назад

    Thank you, your content is high level, but I have a question for you. How can I change the text inside the package? e.g. "Select..." "Select All".

  • @verjanvargasfernandojulian8395

    Hello, do u know a way to show lets say 10 of 50 options on react-select and then it should be scrollable to see more options? I would love to get some help here :P

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад

      Here is infinite loader implementation
      stackblitz.com/edit/react-select-infinite-scroll?file=index.tsx

  • @arieluser
    @arieluser Год назад

    Thanks a lot :-)

  • @musshare
    @musshare Год назад

    why is everyone using dummy data? what if i have 300 entries!! Could you please use an API? I would personally like to see how you implement the using an API say from rapidapi or another.
    Good tutorial meanwhile

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Год назад +2

      If you have 300+ entries then you need a search inside a select. I showed it in the video.

  • @natiking8806
    @natiking8806 2 года назад

    Thanks, bro how to remove __isNew__:true object?

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  2 года назад

      You can just take properties that you need or directly delete __isNew__

  • @manhnguyen-kc2pi
    @manhnguyen-kc2pi Год назад

    What is the theme you use for vs code?

  • @Felipe-wr4xk
    @Felipe-wr4xk Год назад

    excelent to sleep tonight

  • @amreshmallick4584
    @amreshmallick4584 Год назад

    Fake video

  • @vbvb2805
    @vbvb2805 11 месяцев назад

    Акцент крутой