The latest articles on DEV Community by Alvaro Gallego De Paz (@micoblanc). https://dev.to/micoblanc https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2386790%2F56273a44-5eec-4da0-8333-7fa36a5fed93.jpeg https://dev.to/micoblanc en Alvaro Gallego De Paz Fri, 08 Nov 2024 20:50:55 +0000 https://dev.to/micoblanc/new-here-introducing-chipster-a-flexible-multi-entry-input-for-react-feedback-welcome-3ek5 https://dev.to/micoblanc/new-here-introducing-chipster-a-flexible-multi-entry-input-for-react-feedback-welcome-3ek5 <p>Hey Everyone 👋 New here and excited to share my first open-source project, <strong>Chipster</strong>! I created it to address something I kept running into: the need for a flexible, easy-to-use multi-entry input for React. If you’ve ever wanted a quick way to handle tags, multi-email inputs, or list-based data (think Google Drive’s share input), this might be useful for you.</p> <h3> Why Chipster? </h3> <p>HTML doesn’t natively support multiple values in an input, so Chipster was born! I wanted a component that’s simple to integrate, highly customizable, and covers a range of cases, like:</p> <ul> <li> <strong>Multi-email inputs</strong> for contact forms</li> <li> <strong>Tagging systems</strong> for content management</li> <li> <strong>Multi-selection fields</strong> for filters and surveys</li> <li> <strong>Custom lists</strong> (event participants, to-dos, etc.)</li> </ul> <h3> Key Features </h3> <ul> <li>🎨 <strong>Custom Styling</strong> with Tailwind or CSS</li> <li>🔍 <strong>Smart Autocomplete</strong> for easy tagging</li> <li>✅ <strong>Flexible Validation</strong>: control length, duplicates, etc.</li> <li>⌨️ <strong>Full Keyboard Support</strong> </li> <li>🌓 <strong>Light/Dark Themes</strong> to match any app</li> </ul> <p>Check out the <a href="http://chipster.micoblanc.me/start" rel="noopener noreferrer">docs</a> and <a href="http://chipster.micoblanc.me/" rel="noopener noreferrer">demos</a> if you’d like to see the demos.</p> <h3> Looking for Feedback </h3> <p>I’d love any thoughts you have:<br> Is it easy to work with? <br> Does the styling flexibility cover what you’d need? <br> And if you spot anything that could be better, I’d be super grateful for the advice.</p> <p>Thanks for taking a look, and I’m excited to join the Dev.to community!</p> react opensource frontend webcomponents