Keyword Input Component

A customizable keyword input component built with React and Ant Design.

Installation

To install the keyword-input component, run the following command:

npm install keyword-input

Usage

Basic Usage

Import the KeywordInput component and use it within your React application:

import React, { useState } from "react";
import { KeywordInput } from "keyword-input";

const App = () => {
  const [keywords, setKeywords] = useState<string[]>([]);

  const handleKeywordsChange = (newKeywords: string[]) => {
    setKeywords(newKeywords);
  };

  return (
    <div>
      <h1>Keyword Input Example</h1>
      <KeywordInput
        keywords={keywords}
        onChange={handleKeywordsChange}
        placeholder="Add a keyword"
        keywordColor="green"
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Description | | -------------- | ------------------------------ | ----------------------------------------------------------------------------- | | keywords | string[] | Initial array of keywords. Default is an empty array. | | onChange | (keywords: string[]) => void | Callback that is triggered whenever keywords are added or removed. | | placeholder | string | Placeholder text to display in the input field. Default is "Add a keyword". | | className | string | Custom CSS class for styling the input and keywords container. | | keywordColor | string | Color for the keywords. Default is "green". |

Example: Adding Keywords

<KeywordInput
  keywords={keywords}
  onChange={handleKeywordsChange}
  placeholder="Add your keywords here"
  keywordColor="blue"
/>

Example: Handling Keyword Deletion

You can delete keywords by clicking the close button next to each keyword. This will automatically update the keywords array.

const handleKeywordsChange = (updatedKeywords: string[]) => {
  setKeywords(updatedKeywords);
};

Features

• Add/Remove Keywords: Easily add and remove keywords using the input field.
• Validation: Prevent adding duplicate keywords.
• Custom Styling: Customize the keyword color and input placeholder.
• Responsive: The input field dynamically resizes based on the input length.

Development

To contribute to this package or run it locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-username/keyword-input.git

2. Install the dependencies:

   npm install

3. Start the development server:

   npm start

4. Build the package for production:

   npm run build

5. Publish the package:

   npm publish

License

MIT License. See the LICENSE file for more details.

Known Issues

• Duplicate Keywords: If a user enters a keyword that already exists, it will not be added again.
• Input Resizing: The input box will resize based on the length of the text but might not be perfect in all UI contexts.

FAQ

Q: Can I customize the color of the keywords?

A: Yes, you can customize the keyword color using the keywordColor prop.

Q: How do I clear all the keywords?

A: To clear the keywords, you can simply reset the keywords state to an empty array using the onChange handler.

Contribution

Feel free to open an issue or submit a pull request for any improvements or bug fixes. Contributions are always welcome!

1. Fork the repository.
2. Create a new branch for your changes.
3. Commit your changes.
4. Push to your fork.
5. Create a pull request with a clear description of your changes.

Thank you for using the keyword-input component! 😊