{"_id":"@abdulkaderptp/react-select","name":"@abdulkaderptp/react-select","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abdulkaderptp/react-select","version":"1.0.0","description":"A select input made with React js and Tailwind CSS","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","author":{"name":"Abdul Kader","email":"ak@itsak.in"},"license":"MIT","scripts":{"watch":"rollup -c -w","clean":"rm -rf dist","tailwind-build":"tailwindcss -i ./src/index.css -o ./dist/index.css --minify","lint":"eslint .","lint:fix":"eslint --fix .","pret":"prettier -c .","pret:fix":"prettier -w .","format":"prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc","build":"npm run pret && npm run lint && npm run clean && rollup -c && npm run tailwind-build"},"repository":{"type":"git","url":"git+https://github.com/abdulkader/react-tailwindcss-select.git"},"keywords":["combobox","form","input","multiselect","react","react-component","react-tailwind","select","tailwind","tailwindcss","ui"],"peerDependencies":{"react":"^18.2.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.1","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.5.0","@tailwindcss/forms":"^0.5.2","@types/react":"^18.0.21","@typescript-eslint/eslint-plugin":"^5.45.0","@typescript-eslint/parser":"^5.45.0","eslint":"^8.28.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","postcss":"^8.4.14","prettier":"^2.8.0","react":"^18.2.0","rollup":"^2.77.2","rollup-plugin-terser":"^7.0.2","tailwindcss":"^3.1.7","tslib":"^2.4.0","typescript":"^4.8.4"},"dependencies":{"eslint-plugin-import":"^2.26.0"},"bugs":{"url":"https://github.com/abdulkader/react-tailwindcss-select/issues"},"homepage":"https://github.com/abdulkader/react-tailwindcss-select#readme","gitHead":"58ebd3b95017cdbe8c2d76d440698ce0050f73d7","_id":"@abdulkaderptp/react-select@1.0.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-hsUba4wb7ltjrpdpYQkpTJPhd6D9/rBZ049hy98Ol2lvUIBAJ9IIeUIIe5lphWHs9DqV/AwkL7G19KIPhv4gBw==","shasum":"28e3452330dca779216e2c02865a8e180c8a01fd","tarball":"https://registry.npmjs.org/@abdulkaderptp/react-select/-/react-select-1.0.0.tgz","fileCount":22,"unpackedSize":211317,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyI+o2Jcpig94itNdDWNAamcmTBFOg68+czJOL0iLaOwIhANAWTuR4WSlqN5enFF/1vRruUDXgcqvaHJ2URb4esF6M"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5sl9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeZg/+LcdbkvP3M6WTCR232snSdD+qRcETjcR/A/cVG7XO6zQ+BxkT\r\nEzseMFB/m0+cjDUqw77K0LPILgjaTPpnWK7UtSlgTYFeiwcFA/OxxTS5JPP9\r\nE23LnB/uCaJ2p0nX8do1Pl9094JrpZP+8VHiMRcA8CLzS7vxkezvFTcWjTFi\r\nv280A448MCn2RmjsyCnMdgLaAufG/hITCmDxDMhQNsI0xN61tYIA9bLYAiah\r\n6Qek0NdrOZ+ybJ9PsNDD0ywVPcpsI42vw6nBckDu2nVc1PPrnvXmCrxn81XF\r\nDXY0QrTJ/Pfb5l3tvy9TkKdRZE78c4sM84utMBBH1QL0tEkmD63KsZGBJHhs\r\n+7p2iRlUau8rEmhGUeA/oT2DNrReL23boZrfrftmiveLkwQag4PgKhHawSDL\r\nwDJ63LFNs4cpJnJBOnY+Skvks0R9u21xh+qIs0+N78Wbo7Qs0OICpa9w0kBe\r\nvMeLPwz1XUNGmRPDqJZK6Gg8AIE6IiATDijiMoMcZVdDAw7E2zGMaxUp94SZ\r\n5q0+wW8BySKp92/Du0WEvSvh7HlopwFAgMnSQv6EUlasUdYd89eC757aU2Pi\r\nxXJmWEbtUj3182IPjYRT2TzWRtVJQdKa3VoLk4mTqPCgtbuLyvfIcZHgwWaz\r\ndVOKLxqlilE1ytNIoc9vm/ncImyqp2kzVQQ=\r\n=jnwe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abdulkaderptp","email":"ak@itsak.in"},"directories":{},"maintainers":[{"name":"abdulkaderptp","email":"ak@itsak.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-select_1.0.0_1676069245290_0.7760280534909911"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-10T22:47:25.236Z","1.0.0":"2023-02-10T22:47:25.438Z","modified":"2023-02-10T22:47:25.584Z"},"maintainers":[{"name":"abdulkaderptp","email":"ak@itsak.in"}],"description":"A select input made with React js and Tailwind CSS","homepage":"https://github.com/abdulkader/react-tailwindcss-select#readme","keywords":["combobox","form","input","multiselect","react","react-component","react-tailwind","select","tailwind","tailwindcss","ui"],"repository":{"type":"git","url":"git+https://github.com/abdulkader/react-tailwindcss-select.git"},"author":{"name":"Abdul Kader","email":"ak@itsak.in"},"bugs":{"url":"https://github.com/abdulkader/react-tailwindcss-select/issues"},"license":"MIT","readme":"<h1 align=\"center\" style=\"border-bottom: 0 white\">\n    📦 React tailwindcss select\n</h1>\n\n<p align=\"center\">\n    React-tailwindcss-select is a simple component ready to be inserted into your project <br> This component inspired by <a href=\"https://react-select.com\">React-select</a> is a select input made with <a href=\"https://tailwindcss.com/\">Tailwindcss</a> and <a href=\"https://reactjs.com\">React</a>.\n</p>\n\n<p align=\"center\">\n    <a href=\"https://github.com/onesine/react-tailwindcss-select/blob/master/LICENSE\">\n        <img src=\"https://img.shields.io/npm/l/react-tailwindcss-select.svg\" alt=\"MIT License\">\n    </a>\n    <a href=\"https://www.npmjs.com/package/react-tailwindcss-select\">\n        <img src=\"https://img.shields.io/npm/v/react-tailwindcss-select.svg\">\n    </a>\n    <a href=\"https://github.com/yarnpkg/berry\">\n        <img src=\"https://img.shields.io/badge/developed%20with-Yarn%202-blue\">\n    </a>\n</p>\n\n## Features\n\n-   ✅ Select field for a single item\n-   ✅ Selection field for multiple items\n-   ✅ Optional button to clear the field\n-   ✅ Optional search for an item\n-   ✅ Optional deactivation of an option\n-   ✅ TypeScript support\n-   ✅ Group options\n-   ⬜ Customization of the select field style\n-   ⬜ Fixed Options (multiple items select)\n\n## Why ❔\n\nA select with the above features is above all indispensable in many projects. On a project using\ntailwindcss, when I install [react-select](https://react-select.com) or other such packages, the\nstyle of the latter is affected by that of [tailwind](https://tailwindcss.com/).\n\nRather than looking for a component that uses [tailwind](https://tailwindcss.com/), I preferred to\nmake my own based on react-select which I like (and also because I generally like to reinvent the\nwheel 😅).\n\n<p align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/onesine/react-tailwindcss-select/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09.png\" alt=\"preview react-tailwindcss-select\">\n</p>\n\n## Online Demo\n\nYou can find the online demo at [here](https://demo-react-tailwindcss-select.vercel.app/)\n\n## Install\n\nYou can use yarn\n\n```bash\nyarn add react-tailwindcss-select\n```\n\nOr via npm\n\n```bash\nnpm install react-tailwindcss-select\n```\n\nmake sure you have installed the peer dependencies as well with the below versions.\n\n```\n\"react\": \"^18.2.0\"\n```\n\n## Usage\n\nThis component also exports a tiny CSS file built by tailwind. All CSS classes used in designing and\ncustomizing the select component are all custom tailwind classes which ensures that an existing\ntailwind project would not need to include this CSS file again.\n\n### Tailwind Project\n\nA tailwind project would only have to import the react component using\n`import Select from 'react-tailwindcss-select'` and specify the component in the tailwind\nconfiguration to generate the styles of the classes used by react-tailwindcss-select.\n\nUse this code to add the component to the tailwind configuration\n\n```javascript\n// in your tailwind.config.js\nmodule.exports = {\n    // ...\n    content: [\n        \"./src/**/*.{js,jsx,ts,tsx}\",\n        \"./node_modules/react-tailwindcss-select/dist/index.esm.js\"\n    ]\n    // ...\n};\n```\n\n### None Tailwind Project\n\nOn a project that does not use tailwind, you need to import the component's CSS as well. To do this\nuse these two codes: `import Select from 'react-tailwindcss-select'` and\n`import 'react-tailwindcss-select/dist/index.css'`\n\n> **Warning**\n>\n> In this case when you don't use tailwind on your project, think about isolating the component and\n> its style so that tailwind doesn't affect the style of the elements in your project. For this, you\n> can use the\n> [shadow dom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).\n\nThen use react-tailwindcss-select in your app:\n\n#### With React Component\n\n```javascript\nimport React from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { animal: null };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value) {\n        console.log(\"value:\", value);\n        this.setState({ animal: value });\n    }\n\n    render() {\n        const { animal } = this.state;\n\n        return (\n            <Select\n                value={animal}\n                onChange={this.handleChange}\n                options={options}\n            />\n        );\n    }\n}\n```\n\n#### With React Hooks\n\n```javascript\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nconst App = () => {\n    const [animal, setAnimal] = useState(null);\n\n    const handleChange = value => {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return (\n        <Select\n            value={animal}\n            onChange={handleChange}\n            options={options}\n        />\n    );\n};\n\nexport default App;\n```\n\n## Theming options\n\n**Supported themes**\n![Theme supported](https://raw.githubusercontent.com/onesine/react-tailwindcss-datepicker/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09_theme.png?raw=true)\n\nTo change the default theme, simply add the `primaryColor` props to your select field with the theme\nvalue. By default, the `primaryColor` is set to `blue`\n\n### Indigo example\n\n```javascript\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nconst App = () => {\n    const [animal, setAnimal] = useState(null);\n\n    const handleChange = value => {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return (\n        <Select \n            primaryColor={\"indigo\"} \n            value={animal} \n            onChange={handleChange} \n            options={options} \n        />\n    );\n};\n\nexport default App;\n```\n\n## Props\n\nThis table shows all the options available in react-tailwindcss-select.\n\n| Option                                    | Type       | Default            | Description                                                                      |\n|-------------------------------------------|------------|--------------------|----------------------------------------------------------------------------------|\n| [`classNames`](#classNames)               | `Object`   | `undefined`        | This prop allows you to style most of the components used by this library.       |\n| `isClearable`                             | `Boolean`  | `true`             | Indicates if you can empty the select field.                                     |\n| `isDisabled`                              | `Boolean`  | `false`            | Indicates if you can disable the select field.                                   |\n| `isMultiple`                              | `Boolean`  | `false`            | Indicates if you can do a multiple selection.                                    |\n| `isSearchable`                            | `Boolean`  | `true`             | Indicates if you can search the elements of the select field.                    |\n| `isSearchable`                            | `Boolean`  | `true`             | Indicates if you can search the elements of the select field.                    |\n| [`formatGroupLabel`](#formatGroupLabel)   | `Function` | `null`             | Allows you to use a custom rendering template for each subgroup title            |\n| [`formatOptionLabel`](#formatOptionLabel) | `Function` | `null`             | Allows you to use a custom rendering template for each option in the list        |\n| `loading`                                 | `Boolean`  | `false`            | Indicates if you want a loader to appear in the field.                           |\n| `menuIsOpen`                              | `Boolean`  | `false`            | Indicates if you want the options menu to be displayed by default.               |\n| `noOptionsMessage`                        | `String`   | `No results found` | Default message when there is no option in the select field.                     |\n| [`onChange`](#onChange)                   | `Function` |                    | This callback, if present, is triggered when the select field value is modified. |\n| [`options`](#options)                     | `Array`    | `[]`               | All options or options groups available in the selection field.                  |\n| `placeholder`                             | `String`   | `Select...`        | The placeholder shown for the select field.                                      |\n| `primaryColor`                            | `String`   | `blue`             | Default theme of the field.                                                      |\n| `searchInputPlaceholder`                  | `String`   | `Search...`        | The placeholder shown for the search input field.                                |\n| [`value`](#value)                         | `Object`   | `null`             | Current value of select field.                                                   |\n\n### onChange\n\nThis callback, if present, is triggered when the select field value is modified. This callback takes\nas a parameter the current value(s) selected. These values respect the same structure as the\nelements of the options.\n\n```js\ncurrentValue => {\n    console.log(\"currentValue:\", currentValue);\n};\n```\n\n### options\n\nAll options are available in the select field. Each option element must have a `value` property that\nserves as an identifier for the element, a `label` property that is the text that is displayed in\nthe options list, and an optional `disabled` property to specify whether the element is active.\n\n```js\n// default element\nconst options = [{ value: \"fox\", label: \"🦊 Fox\" }];\n// default element with `disabled`\nconst options = [{ value: \"fox\", label: \"🦊 Fox\", disabled: true }];\n```\n\n#### Group item\n\nIf you want to group options you can use the following code.\n\n```js\nconst options = [\n    {\n        label: \"Mammal\",\n        options: [\n            { value: \"Dolphin\", labe: \"🐬 Dolphin\" },\n            { value: \"Giraffe\", labe: \"🦒 Giraffe\" }\n        ]\n    },\n    {\n        label: \"Carnivore\",\n        options: [\n            { value: \"Tiger\", labe: \"🐅 Tiger\" },\n            { value: \"Lion\", labe: \"🦁 Lion\" }\n        ]\n    },\n    // 👉 You can put the grouped and ungrouped options together\n    { value: \"Zombie\", labe: \"🧟 Zombie\" }\n];\n```\n\n> **Info**\n>\n> 👉 You can put the grouped and ungrouped options together.\n\n### value\n\nThe current value of the select field. These objects must follow the same structure as an `options`\nelement. Thus, the following would work:\n\n```js\n// default element Simple Select\nconst value = { value: \"fox\", label: \"🦊 Fox\" };\n// default element with `disabled` Simple Select\nconst value = { value: \"fox\", label: \"🦊 Fox\", disabled: true };\n// default element Multiple Select\nconst value = [{ value: \"fox\", label: \"🦊 Fox\" }];\n// default element with `disabled` Multiple Select\nconst value = [{ value: \"fox\", label: \"🦊 Fox\", disabled: true }];\n```\n\n### formatGroupLabel\n\n`formatGroupLabel` allows you to use a custom rendering template for each subgroup title <br />\n\n```jsx\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    {\n        label: \"Mammal\",\n        options: [\n            { value: \"Dolphin\", labe: \"🐬 Dolphin\" },\n            { value: \"Giraffe\", labe: \"🦒 Giraffe\" }\n        ]\n    },\n    {\n        label: \"Carnivore\",\n        options: [\n            { value: \"Tiger\", labe: \"🐅 Tiger\" },\n            { value: \"Lion\", labe: \"🦁 Lion\" }\n        ]\n    }\n];\n\nconst App = () => {\n    const [animal, setAnimal] = useState(null);\n\n    const handleChange = value => {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return (\n        <Select\n            value={animal}\n            onChange={handleChange}\n            options={options}\n            isMultiple={true}\n            formatGroupLabel={data => (\n                <div className={`py-2 text-xs flex items-center justify-between`}>\n                    // 👉 data represents each subgroup\n                    <span className=\"font-bold\">{data.label}</span>\n                    <span className=\"bg-gray-200 h-5 h-5 p-1.5 flex items-center justify-center rounded-full\">\n                        {data.options.length}\n                    </span>\n                </div>\n            )}\n        />\n    );\n};\n\nexport default App;\n```\n\n> **Info**\n>\n> 👉 data represents each subgroup.\n\n### formatOptionLabel\n\n`formatOptionLabel` allows you to use a custom rendering template for each option in the list.\n<br />\n\n```jsx\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nconst App = () => {\n    const [animal, setAnimal] = useState(null);\n\n    const handleChange = value => {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return (\n        <Select\n            value={animal}\n            onChange={handleChange}\n            options={options}\n            formatOptionLabel={data => (\n                <li\n                    className={`block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${\n                        !data.isSelected\n                            ? `text-white bg-blue-500`\n                            : `text-gray-500 bg-blue-100 text-blue-500`\n                    }`}\n                >\n                    // data represents each option in the list\n                    {data.label}\n                </li>\n            )}\n        />\n    );\n};\n\nexport default App;\n```\n\n> **Info**\n>\n> 👉 data represents each option in the list.\n\n### classNames\n\nAs of version 1.6.0 of `react-tailwindcss-select` you can now use the `classNames` prop for styling.\n\n> **Info**\n>\n> 👉 Note: this is not to be confused with the className prop, which will add a class to the component.\n\n`classNames` takes an object with keys to represent the various inner components that `react-tailwindcss-select` is made up of. \n\nEach key takes a callback function or a string. If a key is not filled in, the default classes of the component will be used.\n\n#### All keys\n\n```typescript\ninterface SelectProps {\n    // ....\n    classNames?: {\n        menuButton?: ({ isDisabled }: { isDisabled: boolean }) => string;\n        menu?: string;\n        tagItem?: ({ isDisabled }: { isDisabled: boolean }) => string;\n        tagItemText?: string;\n        tagItemIconContainer?: string;\n        tagItemIcon?: string;\n        list?: string;\n        listGroupLabel?: string;\n        listItem?: ({ isSelected }: { isSelected: boolean }) => string;\n        listDisabledItem?: string;\n        ChevronIcon?: ({ open }: { open: boolean }) => string;\n        searchContainer?: string;\n        searchBox?: string;\n        searchIcon?: string;\n        closeIcon?: string;\n    };\n    // ...\n}\n```\n\n#### Example of a custom style\n\n```javascript\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nconst App = () => {\n    const[animal, setAnimal] =useState(null);\n\n    const handleChange = value => {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return(\n        <Select\n            value={animal}\n            onChange={handleChange}\n            options={options}\n            classNames={{\n                menuButton: ({ isDisabled }) => (\n                    `flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none ${\n                        isDisabled\n                            ? \"bg-gray-200\"\n                            : \"bg-white hover:border-gray-400 focus:border-blue-500 focus:ring focus:ring-blue-500/20\"\n                    }`\n                ),\n                menu: \"absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700\",\n                listItem: ({ isSelected }) => (\n                    `block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${\n                        isSelected\n                            ? `text-white bg-blue-500`\n                            : `text-gray-500 hover:bg-blue-100 hover:text-blue-500`\n                    }`\n                )\n            }}\n        />\n    );\n};\n\nexport default App;\n```\n\n## Contributing\n\nGot ideas on how to make this better? Open an issue!\n\n## Thanks\n\nThis component is inspired by the excellent [react-select](https://react-select.com/) library by Jed\nWatson.\n\nI thank you in advance for your contribution to this project.\n\n## License\n\nMIT Licensed. Copyright (c) Lewhe Onesine 2022.\n","readmeFilename":"README.md"}