100 |

Demo react-tailwindcss-select

101 | 102 |

103 |

104 | 107 | 108 | 111 |

112 | 113 | 114 |

115 | {showCode ? ( 116 |

117 |

This part will be available soon.

118 |

119 | You can access the source code of the demo project here.
120 | Any contribution to the package will be welcome. You can access the package source code here
121 | Thanks for testing react-tailwindcss-select and have a nice 👋 day. 122 |

123 |

124 | ) : ( 125 | 126 | 11 | {children} 12 | 13 | ); 14 | }; 15 | 16 | export default Checkbox; -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | const Header = ({children}) => { 2 | return ( 3 |

4 |

5 | {children} 6 |

7 |

8 | ); 9 | }; 10 | 11 | export default Header; -------------------------------------------------------------------------------- /src/components/Link.jsx: -------------------------------------------------------------------------------- 1 | export const DarkLink = ({children, url}) => { 2 | return ( 3 | {children} 4 | ); 5 | }; 6 | 7 | export const LightLink = ({children, url}) => { 8 | return ( 9 | {children} 10 | ); 11 | }; -------------------------------------------------------------------------------- /src/components/SelectContainer.jsx: -------------------------------------------------------------------------------- 1 | const SelectContainer = ({children}) => { 2 | return ( 3 |

4 |

5 | {children} 6 |

7 |

8 | ); 9 | }; 10 | 11 | export default SelectContainer; -------------------------------------------------------------------------------- /src/components/TailwindColors.jsx: -------------------------------------------------------------------------------- 1 | const TailwindColors = ({changeColor}) => { 2 | return ( 3 |

4 |

changeColor("blue")} 6 | className="h-7 px-2 text-xs font-semibold bg-blue-500 rounded-md flex items-center justify-center text-white cursor-pointer">blue 7 |

8 |

changeColor("orange")} 10 | className="h-7 px-2 text-xs font-semibold bg-orange-500 rounded-md flex items-center justify-center text-white cursor-pointer">orange 11 |

12 |

changeColor("yellow")} 14 | className="h-7 px-2 text-xs font-semibold bg-yellow-500 rounded-md flex items-center justify-center text-white cursor-pointer">yellow 15 |

16 |

changeColor("red")} 18 | className="h-7 px-2 text-xs font-semibold bg-red-500 rounded-md flex items-center justify-center text-white cursor-pointer">red 19 |

20 |

changeColor("purple")} 22 | className="h-7 px-2 text-xs font-semibold bg-purple-500 rounded-md flex items-center justify-center text-white cursor-pointer">purple 23 |

24 |

changeColor("amber")} 26 | className="h-7 px-2 text-xs font-semibold bg-amber-500 rounded-md flex items-center justify-center text-white cursor-pointer">amber 27 |

28 |

changeColor("lime")} 30 | className="h-7 px-2 text-xs font-semibold bg-lime-500 rounded-md flex items-center justify-center text-white cursor-pointer">lime 31 |

32 |

changeColor("green")} 34 | className="h-7 px-2 text-xs font-semibold bg-green-500 rounded-md flex items-center justify-center text-white cursor-pointer">green 35 |

36 |

changeColor("emerald")} 38 | className="h-7 px-2 text-xs font-semibold bg-emerald-500 rounded-md flex items-center justify-center text-white cursor-pointer">emerald 39 |

40 |

changeColor("teal")} 42 | className="h-7 px-2 text-xs font-semibold bg-teal-500 rounded-md flex items-center justify-center text-white cursor-pointer">teal 43 |

44 |

changeColor("cyan")} 46 | className="h-7 px-2 text-xs font-semibold bg-cyan-500 rounded-md flex items-center justify-center text-white cursor-pointer">cyan 47 |

48 |

changeColor("sky")} 50 | className="h-7 px-2 text-xs font-semibold bg-sky-500 rounded-md flex items-center justify-center text-white cursor-pointer">sky 51 |

52 |

changeColor("indigo")} 54 | className="h-7 px-2 text-xs font-semibold bg-indigo-500 rounded-md flex items-center justify-center text-white cursor-pointer">indigo 55 |

56 |

changeColor("violet")} 58 | className="h-7 px-2 text-xs font-semibold bg-violet-500 rounded-md flex items-center justify-center text-white cursor-pointer">violet 59 |

60 |

changeColor("purple")} 62 | className="h-7 px-2 text-xs font-semibold bg-purple-500 rounded-md flex items-center justify-center text-white cursor-pointer">purple 63 |

64 |

changeColor("fuchsia")} 66 | className="h-7 px-2 text-xs font-semibold bg-fuchsia-500 rounded-md flex items-center justify-center text-white cursor-pointer">fuchsia 67 |

68 |

changeColor("pink")} 70 | className="h-7 px-2 text-xs font-semibold bg-pink-500 rounded-md flex items-center justify-center text-white cursor-pointer">pink 71 |

72 |

changeColor("rose")} 74 | className="h-7 px-2 text-xs font-semibold bg-rose-500 rounded-md flex items-center justify-center text-white cursor-pointer">rose 75 |

76 |

77 | ); 78 | }; 79 | 80 | export default TailwindColors; -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const mangas = [ 2 | { 3 | label: "SHONEN", 4 | options: [ 5 | {value: "One Piece", label: "🤩 One Piece", disabled: false}, 6 | {value: "Naruto Shippûden", label: "🤭 Naruto Shippûden", disabled: false}, 7 | {value: "Hunter x Hunter", label: "🥰 Hunter x Hunter", disabled: false}, 8 | ] 9 | }, 10 | { 11 | label: "SHOJO", 12 | options: [ 13 | {value: "Orange", label: "🤩 Orange", disabled: false}, 14 | {value: "Nana", label: "🤭 Nana", disabled: false}, 15 | {value: "Tonari no Kaibutsu-kun", label: "🥰 Tonari no Kaibutsu-kun", disabled: false}, 16 | ] 17 | }, 18 | { 19 | label: "SEINEN", 20 | options: [ 21 | {value: "Death Note", label: "🤩 Death Note", disabled: false}, 22 | {value: "Btooom!", label: "🤭 Btooom!", disabled: false}, 23 | {value: "Black Lagoon", label: "🥰 Black Lagoon", disabled: false}, 24 | ] 25 | }, 26 | { 27 | label: "JOSEI", 28 | options: [ 29 | {value: "Nodame Cantabile", label: "🤩 Nodame Cantabile", disabled: false}, 30 | {value: "Chihayafuru", label: "🤭 Chihayafuru", disabled: false}, 31 | {value: "Blue", label: "🥰 Blue", disabled: false}, 32 | ] 33 | }, 34 | {value: "Naruto Shippûden", label: "🤭 Naruto Shippûden", disabled: false}, 35 | {value: "One Piece", label: "🤩 One Piece", disabled: false}, 36 | {value: "Bleach", label: "🥹 Bleach", disabled: false}, 37 | {value: "Boruto", label: "😡 Boruto", disabled: false}, 38 | {value: "Hunter x Hunter", label: "🥰 Hunter x Hunter", disabled: false}, 39 | {value: "Dragon Ball Z", label: "🥵 Dragon Ball Z", disabled: false}, 40 | {value: "Fullmetal Alchemist", label: "🫡 Fullmetal Alchemist", disabled: false}, 41 | {value: "My Hero Academia", label: "🤯 My Hero Academia", disabled: false}, 42 | {value: "Black Clover", label: "😍 Black Clover", disabled: false}, 43 | ]; 44 | 45 | export const selectOptions = [ 46 | "isClearable", "isSearchable", "isMultiple", "isDisabled", "loading", "isGroupOption" 47 | ]; 48 | 49 | export const printAlertContent = (element, value) => { 50 | const printText = (text, value) => ( 51 | value ? ( 52 |

{text}

53 | ) : null 54 | ); 55 | 56 | switch (element) { 57 | case "isClearable": 58 | return printText("You can empty the field", value); 59 | case "isSearchable": 60 | return printText("You can search for an item in the option list", value); 61 | case "isMultiple": 62 | return printText("You can select several options", value); 63 | case "isDisabled": 64 | return printText("The field is disabled", value); 65 | case "loading": 66 | return printText("A loader appears on the field", value); 67 | case "isGroupOption": 68 | return printText("The options of the select field are grouped", value); 69 | default: 70 | return null; 71 | } 72 | }; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import "./index.css" 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./public/index.html", 5 | "./src/**/*.{js,jsx,ts,tsx}", 6 | "./node_modules/react-tailwindcss-select/dist/index.esm.js"], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [require('@tailwindcss/forms')], 11 | } 12 | --------------------------------------------------------------------------------