{"_id":"@abdelkader59/react-select","name":"@abdelkader59/react-select","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@abdelkader59/react-select","description":"Custom select React component with a dropdown list","author":"","keywords":["react","components","select","dropdown"],"private":false,"version":"0.1.1","main":"dist/Select.js","module":"dist/Select.js","repository":{"type":"git","url":""},"dependencies":{"@babel/polyfill":"^7.12.1","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@testing-library/user-event":"^13.5.0","web-vitals":"^2.1.4"},"scripts":{"start":"react-scripts start","build":"rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.18.6","@babel/core":"^7.18.6","@babel/preset-env":"^7.18.6","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1"},"_id":"@abdelkader59/react-select@0.1.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-jC1OmrbSHm3YdN+CXPHV1kCAceeAPjVm/gluVp921yMpaKn3wW79M7+ZcteAcz8dDPaU2Qrn/6iUFAXeAAoq+g==","shasum":"e4e3d10080b318f42969251d60f116a7d248bc3a","tarball":"https://registry.npmjs.org/@abdelkader59/react-select/-/react-select-0.1.1.tgz","fileCount":4,"unpackedSize":10179,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiYzzeuiwKASiwV19MUoxUAYn3h4tDopXbgq1LqfHopwIhAOjjdTtC3FP17ubDEetQVhScp9Ypri56Ndvy4nASpjsQ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKUvSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdvRAAl3dzGwaraCS9pn1Fi7F3xgwgQi3PPs0776mgZKPKPig8/0+6\r\nDg3+ObIFjRXBNbrUmiEZa4n4SYlRuMBUFBjudXydJm76x/9TY/vWz5Mal4w2\r\nmlXMDwTzyCMXzOJLANi7aHd4LoBUh3fiDDq88KhDbjkWphE9AZGCRV/cIof4\r\neG3nQPEBfAJaTsun9ljWtX8dw2rFwZg8lY7jbX8tpstHYrS2H1n3qos2WEUW\r\nbfxLV8BOyz05Z+4D3A8CCbw5WfEnqfkFNH1R7ebaJ2ACuwIxobOkuXjDLd6i\r\nIbYdu+O+O4B+WxnHKdv5eR2HsY/oMo3/Ph8qfvVUiuVuUsFg7nmhAETxg5yL\r\nuLA46kxJxBV7NskOsswtmPlj1iXkAqda3lcRreu1c0e2OMUPbx9A65yUwktw\r\nmWAWf+ZrAVQLpzs4BoMXSXmgR+Ucz7Qq/OdCo09sp+wFAYfXWvegkAyfFrJU\r\nFXSF24cTcP6/jH02Zs+7s8SZi/bgHnxFM0zeFUKosTgF7d2XMXqY2F3W2fZT\r\nE1kKF3VzEYoqtaGy1pJAb/CIUqm60o0/s3/YMwtexKhzZmmOj4EHBqSSsi5/\r\nFFcfcWMgOjFtDe1FA5YdwRXQbbz6HmPTxCz1YgFv5kWNJXT4fPMHYlMeS5q1\r\n1C2DmMV9JeQHNkL+MJdOYxq+xbqQ2WqR+4E=\r\n=4R4D\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abdelkader59","email":"Abdelkader.merine@outlook.fr"},"directories":{},"maintainers":[{"name":"abdelkader59","email":"Abdelkader.merine@outlook.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-select_0.1.1_1680427986565_0.8995471314021433"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-02T09:33:06.487Z","0.1.1":"2023-04-02T09:33:06.721Z","modified":"2023-04-02T09:33:07.026Z"},"maintainers":[{"name":"abdelkader59","email":"Abdelkader.merine@outlook.fr"}],"description":"Custom select React component with a dropdown list","keywords":["react","components","select","dropdown"],"repository":{"type":"git","url":""},"readme":"# @abdelkader59/react-select\n\nThis project is a React component to create a custom select dropdown.\n\nThere are different parameters as props:\n- id (String): ID name for the select,\n- options (Array): array of selectable options (a list element is created for each option in array),\n- abbreviations (Boolean): true if options are objects with name and abbreviation properties / false if option array is simple\n\nIf the array of options has objects with abbreviations, get only the name as title and only the abbreviation as value (which can be saved in Redux). This allows to have a simple array (no objects) as 'options' too.\n\nBefore any selection, the displayed option on text button is the first option of options' array.\nA \"value\" attribute has been created on text button (which has the id) to easily get the selected option value.\n\nIf the button is clicked, the options list is shown and each option is accessible with keyboard.\nIf an option is selected/clicked, the text button is updated and the options list is hidden.\n\n## Installation\n\nIn your project directory, you can run the following command to install the npm package:\n\n```sh\nnpm install @abdelkader59/react-select\n```\n\n## Import and use\n\nIn your React component or page, you can import the React component from the installed npm package:\n\n`import Select from '@abdelkader59/react-select';`\n\nThen, you can use your imported component, for example:\n\n`<Select id=\"YOUR_ID\" options={YOUR_OPTIONS_ARRAY} abbreviations={false} />`\n\n\n\n","readmeFilename":"README.md"}