sm.mov
A small project demonstrating a possible React DropdownMenu component.
Running:
cd path-to-react-dropdown
npm install
npm run dev
Features:
- Custom components can be passed to represent the options / placeholder / reset children of the dropdown
- Bi-directional display (up or down)
- Supports container styling (apply corner radius, optional drop shadow, padding, etc to the container wrapped around the entire menu)
- Tab support / auto-expands on focus
- Animated expand / collapse
- Supports "auto" direction which will pick a direction based on available space in the viewport
- Automatically adjusts dropdown scale to ensure it doesn't extend outside
Todo:
- Accessibility
- Support left/right directions
![image](https://private-user-images.githubusercontent.com/2840242/327262190-d1229e78-8bfd-497e-8edf-741c54c05b84.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYwOTM2OTcsIm5iZiI6MTcyNjA5MzM5NywicGF0aCI6Ii8yODQwMjQyLzMyNzI2MjE5MC1kMTIyOWU3OC04YmZkLTQ5N2UtOGVkZi03NDFjNTRjMDViODQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTFUMjIyMzE3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDExMGEwOGE3M2NjYjk5Mzg2OTBjYTUyYmVlNjA2MWY1YWQwMzk2MGViNTA0NTk2MTQ2MTMzMTQ2ZDkwN2M4OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.BRqtVj1N8q2XpRrrDuCWMy9KvEBI41G_67NkXPUdwfs)
![image](https://private-user-images.githubusercontent.com/2840242/327262255-06326cb8-ad08-4efe-8bb7-1ade44e380b6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYwOTM2OTcsIm5iZiI6MTcyNjA5MzM5NywicGF0aCI6Ii8yODQwMjQyLzMyNzI2MjI1NS0wNjMyNmNiOC1hZDA4LTRlZmUtOGJiNy0xYWRlNDRlMzgwYjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkxMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MTFUMjIyMzE3WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzAyNjc2M2IzZDI3NTNiYmMyMGU3OTljNTVmMGI4NzViYTZjYzFlZGIyZTI2NzI2MDRjMmI2MjdhNzMwNjA2MyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.sSDqBXjOhlT19pRnc0NGyROOP4LWE6CT-zCo-WHT2t4)