Custom Dropdown using React.js | REACT CUSTOM COMPONENT |

Рет қаралды 115,160

3 жыл бұрын

Custom Dropdown | select using react.js. The following code is available on coding sandbox
link for the sandbox - codesandbox.io/live/3vohdkw
#customComponent #react #html #css #dropdown #customDropdown

Пікірлер: 56

@jongomezdev 2 жыл бұрын

the easiest solution out of hundreds.. KEEP UP THE GOOD WORK

@raphaelrychard5440 Ай бұрын

Perfect video, great tutorial on how to create a custom dropdown

@pitambarjadhav9984 Жыл бұрын

precise and up to the point thank you.!

@poolcaceres493 Жыл бұрын

It has been a year and its still a really good tutorial

@amoriblain3655 2 жыл бұрын

Great job! Thank you very much

@downsiteup1 2 жыл бұрын

made my day, thanks a lot

@ellsonmendesYT 2 жыл бұрын

kind of css carret .carret{ transition: all .2s; position: relative; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #ddd; } just stick it inside the dropdown-btn :)

@islombektadjiyev793 4 ай бұрын

Perfect ! Thanks bro

@dennisfisher2684 2 жыл бұрын

It's cool! ) Thanks )

@AliRazaTruth Жыл бұрын

thanks so much bro for this helpfull tutorial .

@abusalimansari6279 2 жыл бұрын

thank you sir video is awesome thx for help

@thebigman9341 2 жыл бұрын

thanks for the awesome video

@rajbannasa7662 Жыл бұрын

Thank you so much sir ❤️

@abelardoblog Жыл бұрын

Hey how I can use the same drop-down but with different information ? Amazing video 😊

@ellsonmendesYT 2 жыл бұрын

3:39 as a miracle the carret appeared lol

@pritech8302 2 жыл бұрын

thankyou so much sir

@user-rr7yr9ml9p 3 жыл бұрын

Thanks!

@techcareweb6613 2 жыл бұрын

Welcome!

@user-tn5qb6xw6h 2 жыл бұрын

Super!!!!

@ekta_shukla9248 2 жыл бұрын

Can i get the link of the whole code..!!it would be helpful

@user-ng8bj8uz5n 4 ай бұрын

👍👍👍

@AminSani Жыл бұрын

It seems like this session (Codesandbox) doesn't exist or has been closed

@hrishikeshdeoghare4359 2 жыл бұрын

nice

@foxymizer 2 жыл бұрын

in what time did you add an arrow?

@ayushsingh-re7dn 5 ай бұрын

GREAT JOB! WORTH THE SUBSCRIBE! GOOD DAY..

@sancharidas7923 2 жыл бұрын

I want to place two dropdowns placed side by side. Can you please tell me how to do that. Thank you.

@emreozgun3846 2 жыл бұрын

I'd manipulate opacity/visibility with transition by adding/removing classes instead of conditionally rendering.

@techcareweb6613 2 жыл бұрын

Yes, you can do that as well.

@thegeneralcategory2792 Жыл бұрын

thnq

@letsexplainme 2 жыл бұрын

sandbox link is not working

@manojrao9867 2 жыл бұрын

how did you get drop down arrow beside "Choose One" for bold property. Am I missing anything please let me know.

@tanishkaborkar9754 2 жыл бұрын

see some video on react-icons you will get an clear idea then

@abrahamjoseph3080 Жыл бұрын

Hello it's been 2 years since this but this video just saved my job, Please can anyone help with adding a reset button, so selection can be cleared instead of refreshing the browser

@sidharth-singh 2 жыл бұрын

What happens if I use this as a dynamic component and it is at the bottom of viewport. I want the dropdown to open at top. I have been looking for this solution for over a week.

@techcareweb6613 2 жыл бұрын

You can assign a ref to the drop-down element and check for getBoundingClientRect()

@ekta_shukla9248 2 жыл бұрын

Sandbox link is not working

@chenaplayz3263 2 жыл бұрын

Hi how do you handle click outside with the code in the vid

@yatut4467 2 жыл бұрын

He doesn't handle it.

@jaykrishnanandagiri3436 2 жыл бұрын

what about choose one it is not displaying in dropdown because it should display by default right

@SiddharthSingh-vu1ke 2 жыл бұрын

add this under {selected} in App.js

@rishitachoubey6054 3 жыл бұрын

The sandbox link is not working

@techcareweb6613 2 жыл бұрын

codesandbox.io/s/jolly-proskuriakova-pj2tk

@sabareeshsk1326 Жыл бұрын

@@techcareweb6613 thank you, please put this in the description for others too

@Emadev-xq9gf 4 күн бұрын

Hi, the sandbox link is not working, can you upload again?

@fogset3005 2 жыл бұрын

i can not see the code

@rayhadif 2 жыл бұрын

i cant use it twice pls help

@nikeshkumarrakesh6296 Жыл бұрын

code is not working.

@alibalbars5177 2 жыл бұрын

instead of using 95% width you can use box sizing border-box 5:41

@anirudhagandhare6294 2 жыл бұрын

Thank you for the correction 👍

@codingroom928 2 жыл бұрын

clicking outside is unsolved...

@techcareweb6613 2 жыл бұрын

I'll make a new video soon to cover that as well. For now you can use a hook by mantine-ui called use-outside-click

@nickbenton2828 8 ай бұрын

i absolutely cannot stand the fact that they are moving lines for no reason, and cant even put a text explanation to what they are moving and to where. I have rewatched this section of the tutorial 15 times and im about to decide its pointless.

@techcareweb6613 7 ай бұрын

I'll be updating the video soon, it's quite outdated.