Skip to content

Commit

Permalink
Update readme file πŸ“š
Browse files Browse the repository at this point in the history
  • Loading branch information
onesine committed Dec 1, 2022
1 parent ca58e03 commit 8dfe6fd
Showing 1 changed file with 49 additions and 0 deletions.
49 changes: 49 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,55 @@ interface SelectProps {
}
```

#### Example of a custom style

```javascript
import { useState } from "react";
import Select from "react-tailwindcss-select";

const options = [
{ value: "fox", label: "🦊 Fox" },
{ value: "Butterfly", label: "πŸ¦‹ Butterfly" },
{ value: "Honeybee", label: "🐝 Honeybee" }
];

const App = () => {
const[animal, setAnimal] =useState(null);

const handleChange = value => {
console.log("value:", value);
setAnimal(value);
};

return(
<Select
value={animal}
onChange={handleChange}
options={options}
classNames={{
menuButton: ({ isDisabled }) => (
`flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none ${
isDisabled
? "bg-gray-200"
: "bg-white hover:border-gray-400 focus:border-blue-500 focus:ring focus:ring-blue-500/20"
}`
),
menu: "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700",
listItem: ({ isSelected }) => (
`block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${
isSelected
? `text-white bg-blue-500`
: `text-gray-500 hover:bg-blue-100 hover:text-blue-500`
}`
)
}}
/>
);
};

export default App;
```

## Contributing

Got ideas on how to make this better? Open an issue!
Expand Down

0 comments on commit 8dfe6fd

Please sign in to comment.