{"id":18980367,"url":"https://github.com/pierreamgabriel/react-pretty-dropdown","last_synced_at":"2026-05-16T18:04:18.974Z","repository":{"id":57688710,"uuid":"482633739","full_name":"pierreamgabriel/react-pretty-dropdown","owner":"pierreamgabriel","description":"Customizable dropdown menu for React.","archived":false,"fork":false,"pushed_at":"2023-05-08T06:12:29.000Z","size":198,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-16T00:37:41.033Z","etag":null,"topics":["dropdown","dropdown-menu","react","react-dropdown","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pierreamgabriel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-17T21:08:29.000Z","updated_at":"2022-04-17T21:39:17.000Z","dependencies_parsed_at":"2024-10-24T21:26:44.135Z","dependency_job_id":"e13dcdad-f419-40b0-824d-c714dd0e42e3","html_url":"https://github.com/pierreamgabriel/react-pretty-dropdown","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"94f0f787afd01e5076bab86e0c224dba5771bed8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreamgabriel%2Freact-pretty-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreamgabriel%2Freact-pretty-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreamgabriel%2Freact-pretty-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreamgabriel%2Freact-pretty-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierreamgabriel","download_url":"https://codeload.github.com/pierreamgabriel/react-pretty-dropdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239718369,"owners_count":19685725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dropdown","dropdown-menu","react","react-dropdown","reactjs"],"created_at":"2024-11-08T16:06:40.418Z","updated_at":"2026-05-16T18:04:18.934Z","avatar_url":"https://github.com/pierreamgabriel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Pretty Dropdown\n\nCustomizable dropdown menu for React.\n\n## Screenshot\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"screenshot/screenshot.jpg\"\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\nnpm install react-pretty-dropdown\n```\n\n## Usage\n\nImport the component and set menu items using anchor tags, Link from react-router-dom, or buttons. It doesn't matter the element you use because they'll have the same style.\n\n```javascript\nimport Dropdown from 'react-pretty-dropdown';\n\n\u003cDropdown icon=\"ellipsis-vertical\"\u003e\n\u003ca href=\"#\"\u003eItem 1\u003c/a\u003e\n\u003ca href=\"#\"\u003eItem 2\u003c/a\u003e\n\u003ca href=\"#\"\u003eItem 3\u003c/a\u003e\n\u003c/Dropdown\u003e\n```\n\n## Props\n\n**background** - Background color.\u003cbr/\u003e\n**textColor** - Text color.\u003cbr/\u003e\n**fontSize** - Font size.\u003cbr/\u003e\n**hoverBackground** - Background color on hover.\u003cbr/\u003e\n**hoverFontColor** - Font color on hover.\u003cbr/\u003e\n**activeBackground** - Background color of active items.\u003cbr/\u003e\n**activeFontColor** - Font color of active items.\u003cbr/\u003e\n**icon** - Menu button icon. Available options: \"ellipsis-vertical\", \"ellipsis\", \"bars\", and \"caret-down\".\u003cbr/\u003e\n**iconSize** - Menu icon size.\u003cbr/\u003e\n**buttonWidth** - Menu button width.\u003cbr/\u003e\n**buttonBorderOnHover** - Menu button border on hover. Example: \"1px solid #0054a8\".\u003cbr/\u003e\n**buttonBorderOnFocus** - Menu button border on focus. Example: \"1px solid #0054a8\".\u003cbr/\u003e\n**buttonFloat** - Only used to align the menu button to the right. Set it to \"float-end\".\u003cbr/\u003e\n**menuPosition** - Menu horizontal position. The default value is \"35px\", which leaves no gap between the menu button and items.\u003cbr/\u003e\n**width** - Width of the whole component.\u003cbr/\u003e\n\n```javascript\n\u003cDropdown\nicon=\"ellipsis-vertical\"\nbackground=\"lightblue\"\ntextColor=\"black\"\nfontSize=\"1.5rem\"\niconSize=\"1.7rem\"\nhoverBackground=\"green\"\nhoverFontColor=\"white\"\nactiveBackground=\"green\"\nactiveFontColor=\"white\"\nwidth=\"200px\"\nbuttonFloat=\"float-end\"\n\u003e\n\u003ca href=\"#\"\u003eItem 1\u003c/a\u003e\n\u003ca href=\"#\"\u003eItem 2\u003c/a\u003e\n\u003ca href=\"#\"\u003eItem 3\u003c/a\u003e\n\u003c/Dropdown\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreamgabriel%2Freact-pretty-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierreamgabriel%2Freact-pretty-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreamgabriel%2Freact-pretty-dropdown/lists"}