React Mail Chips

A lightweight, customizable React component for managing email input as chips with keyboard navigation and email validation.

Features

• 🎯 Email validation with duplicate checking
• ⌨️ Keyboard navigation and paste support
• 📦 Zero dependencies, TypeScript ready

Table of Contents

• Demo
• Installation
• Usage
• Props
• Examples
• Contributing
• License

Demo

Try the interactive demo here: https://react-mail-chips-js.vercel.app

Installation

Install the library using npm:

1npm install react-mail-chips

Or using yarn:

1yarn add react-mail-chips

Usage

Here's a basic example of how to use the ReactMailChips component:

1import React, { useState } from "react";
2import { ReactMailChips } from "react-mail-chips";
3
4const App = () => {
5  const [emails, setEmails] = useState<string[]>([]);
6
7  return (
8    <div>
9      <ReactMailChips 
10        emails={emails} 
11        setEmails={setEmails}
12        placeholder="Enter email addresses..."
13      />
14    </div>
15  );
16};
17
18export default App;

Examples

With Email Suggestions

1import React, { useState } from "react";
2import { ReactMailChips } from "react-mail-chips";
3
4const App = () => {
5  const [emails, setEmails] = useState<string[]>([]);
6  const suggestedEmails = [
7    "john@example.com",
8    "jane@example.com",
9    "bob@example.com"
10  ];
11
12  return (
13    <div>
14      <ReactMailChips 
15        emails={emails} 
16        setEmails={setEmails}
17        recommendedEmails={suggestedEmails}
18        placeholder="Type to see suggestions..."
19      />
20    </div>
21  );
22};

With Custom Styling

1import React, { useState } from "react";
2import { ReactMailChips } from "react-mail-chips";
3import "./styles.css";
4
5const App = () => {
6  const [emails, setEmails] = useState<string[]>([]);
7
8  return (
9    <div>
10      <ReactMailChips 
11        emails={emails} 
12        setEmails={setEmails}
13        className="custom-container"
14        chipClassName="custom-chip"
15        inputContainerClassName="custom-input"
16      />
17    </div>
18  );
19};

Props

Property	Type	Description	Default
emails	string[]	An array of email strings.	Required
setEmails	(emails:string[]) => void	A function to update the emails array.	Required
className	string?	Additional class names for the container.	""
chipClassName	string?	Additional class names for each chip.	""
inputContainerClassName	string?	Additional class names for the input container.	""
placeholder	string?	Placeholder text for the input field.	""
delimiters	string[]?	An array of delimiters to separate emails.	["Enter",",",";"]
recommendedEmails	string[]?	An array of email suggestions to display while typing.	[]

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License