{"id":22387754,"url":"https://github.com/react-chatbotify-plugins/input-validator","last_synced_at":"2026-03-04T18:03:40.752Z","repository":{"id":261654083,"uuid":"884941877","full_name":"react-chatbotify-plugins/input-validator","owner":"react-chatbotify-plugins","description":"A lightweight plugin to validate user input with visual feedbacks in React ChatBotify!","archived":false,"fork":false,"pushed_at":"2025-10-18T04:52:36.000Z","size":1510,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-19T18:49:44.765Z","etag":null,"topics":["chatbotify","javascript","npm","open-source-project","plugins","react","react-chatbotify","react-chatbotify-plugin","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@rcb-plugins/input-validator","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-chatbotify-plugins.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-07T16:58:42.000Z","updated_at":"2025-10-18T04:52:41.000Z","dependencies_parsed_at":"2025-02-25T17:23:07.889Z","dependency_job_id":"399dffbb-f220-4e61-933b-ab74ed6da1d3","html_url":"https://github.com/react-chatbotify-plugins/input-validator","commit_stats":null,"previous_names":["react-chatbotify-plugins/input-validator"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/react-chatbotify-plugins/input-validator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-chatbotify-plugins%2Finput-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-chatbotify-plugins%2Finput-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-chatbotify-plugins%2Finput-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-chatbotify-plugins%2Finput-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-chatbotify-plugins","download_url":"https://codeload.github.com/react-chatbotify-plugins/input-validator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-chatbotify-plugins%2Finput-validator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30088343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T15:40:14.053Z","status":"ssl_error","status_checked_at":"2026-03-04T15:40:13.655Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatbotify","javascript","npm","open-source-project","plugins","react","react-chatbotify","react-chatbotify-plugin","reactjs","typescript"],"created_at":"2024-12-05T02:10:59.624Z","updated_at":"2026-03-04T18:03:40.743Z","avatar_url":"https://github.com/react-chatbotify-plugins.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\r\n  \u003cimg width=\"200px\" src=\"https://raw.githubusercontent.com/react-chatbotify-plugins/input-validator/main/src/assets/logo.webp\" /\u003e\r\n  \u003ch1 align=\"center\"\u003eInput Validator\u003c/h1\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://github.com/react-chatbotify-plugins/input-validator/actions/workflows/ci-cd-pipeline.yml\"\u003e \u003cimg src=\"https://github.com/react-chatbotify-plugins/input-validator/actions/workflows/ci-cd-pipeline.yml/badge.svg\" /\u003e \u003c/a\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/@rcb-plugins/input-validator\"\u003e \u003cimg src=\"https://img.shields.io/npm/v/@rcb-plugins/input-validator?logo=semver\u0026label=version\u0026color=%2331c854\" /\u003e \u003c/a\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/@rcb-plugins/input-validator\"\u003e \u003cimg src=\"https://img.shields.io/badge/react-16--19-orange?logo=react\u0026label=react\" /\u003e \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n## Table of Contents\r\n\r\n* [Introduction](#introduction)\r\n* [Quickstart](#quickstart)\r\n* [Features](#features)\r\n* [API Documentation](#api-documentation)\r\n* [Team](#team)\r\n* [Contributing](#contributing)\r\n* [Others](#others)\r\n\r\n### Introduction\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg height=\"400px\" src=\"https://github.com/user-attachments/assets/e73e8f0c-5eff-44e6-a48b-e917ed0f7b4f\" /\u003e\r\n\u003c/p\u003e\r\n\r\n**Input Validator** is a plugin that adds user input validation to the [**React ChatBotify Core Library**](https://react-chatbotify.com). By default, the core library does not ship with user input validation. This plugin relies on chatbot events to intercept \u0026 validate user inputs, as well as chatbot hooks to provide visual feedback to users. The demo gif above should give you a pretty good idea of what this plugin is capable of doing.\r\n\r\nFor support, join the plugin community on [**Discord**](https://discord.gg/J6pA4v3AMW) to connect with other developers and get help.\r\n\r\n### Quickstart\r\n\r\nThe plugin is incredibly straightforward to use and is [**available on npm**](https://www.npmjs.com/package/@rcb-plugins/input-validator). Simply follow the steps below:\r\n\r\n1. Install the plugin with the following command within your project folder:\r\n   ```bash\r\n   npm install @rcb-plugins/input-validator\r\n   ```\r\n\r\n2. Import the plugin:\r\n   ```javascript\r\n   import InputValidator from \"@rcb-plugins/input-validator\";\r\n   ```\r\n\r\n3. Initialize the plugin within the `plugins` prop of `ChatBot`:\r\n   ```javascript\r\n   import ChatBot from \"react-chatbotify\";\r\n   import InputValidator from \"@rcb-plugins/input-validator\";\r\n\r\n   const MyComponent = () =\u003e {\r\n     return (\r\n       \u003cChatBot plugins=[InputValidator()]/\u003e\r\n     );\r\n   };\r\n   ```\r\n\r\n4. Add the `validateTextInput` and/or `validateFileInput` attribute to the [**Block**](https://react-chatbotify.com/docs/concepts/conversations#block) that requires validation:\r\n   ```javascript\r\n   import ChatBot from \"react-chatbotify\";\r\n   import InputValidator, { InputValidatorBlock } from \"@rcb-plugins/input-validator\";\r\n\r\n   const MyComponent = () =\u003e {\r\n     const flow = {\r\n       start: {\r\n         message: \"What is your age?\"\r\n         validateTextInput: (userInput) =\u003e {\r\n           if (isNaN(userInput)) {\r\n             return {success: false, promptContent: \"Age must be a number!\", promptDuration: 3000}\r\n           }\r\n         }\r\n       } as InputValidatorBlock\r\n     }\r\n\r\n     return (\r\n       \u003cChatBot plugins=[InputValidator()]/\u003e\r\n     );\r\n   };\r\n   ```\r\n\r\nThe quickstart above shows how input validation can be done for **age input (e.g. ensuring that age is a number)**. The documentation website for the React ChatBotify Core Library also contains a [**live input validation example**](https://react-chatbotify.com/docs/examples/input_validation) that uses this plugin. You may wish to check it out!\r\n\r\n### Features\r\n\r\n**Input Validator** is a lightweight plugin that provides the following features to your chatbot:\r\n- Validate user text input submissions\r\n- Validate user file input (upload) submissions\r\n- Notify users with toasts/highlights upon successful/failed validations\r\n- Advanced styling options upon successful/failed validations\r\n- Auto setups with necessary events enabled out-of-the-box (plug \u0026 play!)\r\n\r\n### API Documentation\r\n\r\n#### Plugin Configuration\r\n\r\nThe `InputValidator` plugin accepts a configuration object that allows you to customize its behavior and appearance. An example configuration is passed in below to initialize the plugin:\r\n\r\n```javascript\r\nimport ChatBot from \"react-chatbotify\";\r\nimport InputValidator from \"@rcb-plugins/input-validator\";\r\n\r\nconst MyComponent = () =\u003e {\r\n  const pluginConfig = {\r\n    // defaults to true, auto enable events required for plugin to work\r\n    autoConfig: true,\r\n    // base color schemes used for toasts, based on validation result\r\n    promptBaseColors: {\r\n      \"error\": \"#dc3545\",\r\n\t\t  \"success\": \"#28a745\",\r\n    },\r\n    // color schemes used when toasts are hovered, based on validation result\r\n    promptHoveredColors: {\r\n      \"error\": \"#c82333\",\r\n      \"success\": \"#218838\",\r\n    },\r\n    // color schemes used for text area highlights, based on validation result\r\n    textAreaHighlightColors: {\r\n      \"error\": \"#dc3545\",\r\n      \"success\": \"#28a745\",\r\n\t  }\r\n    // advanced styles to reflect validation result in other parts of the chatbot\r\n    advancedStyles: {\r\n      error: {\r\n        sendButtonStyle: { backgroundColor: \"red\" },\r\n      },\r\n    },\r\n  }\r\n\r\n  return (\r\n    \u003cChatBot plugins={[InputValidator(pluginConfig)]}/\u003e\r\n  )\r\n}\r\n```\r\n\r\nAs you may be able to tell from above, there are 5 configurable sections within the plugin configuration which are `autoConfig`, `promptBaseColors`, `promptHoveredColors`, `textAreaHighlightColors` and `advancedStyles`. These are described in the table below:\r\n\r\n| Configuration Option         | Type     | Default Value                                                                                                                                                                                                                 | Description                                                                                                               |\r\n|------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------|\r\n| `autoConfig`                 | boolean  | `true`                                                                                                                                                                                                                        | Enables automatic configuration of required events for input validation. Recommended to keep as `true`. If set to `false`, you need to configure events manually. |\r\n| `promptBaseColors`           | object   | `{ \"info\": \"#007bff\", \"warning\": \"#ffc107\", \"error\": \"#dc3545\", \"success\": \"#28a745\" }`                                                                                                                                      | Maps prompt types to colors shown in toast notifications for validation results (success, error, etc.). Define custom prompt types and colors.                    |\r\n| `promptHoveredColors`        | object   | `{ \"info\": \"#0056b3\", \"warning\": \"#d39e00\", \"error\": \"#c82333\", \"success\": \"#218838\" }`                                                                                                                                       | Maps prompt types to colors shown when toast notifications are hovered over during validation. Define custom prompt types and colors.                             |\r\n| `textAreaHighlightColors`    | object   | `{ \"info\": \"#007bff\", \"warning\": \"#ffc107\", \"error\": \"#dc3545\", \"success\": \"#28a745\" }`                                                                                                                                       | Maps prompt types to colors shown in the text area according to validation results. Define custom prompt types and colors.                                       |\r\n| `advancedStyles`             | object   | `{}`                                                                                                                                                                                                                          | Customizes styles for different validation results across the chatbot (not just toast notifications). Each key is a prompt type with corresponding style properties. |\r\n\r\n#### Validating User Input\r\n\r\nThe plugin allows validating user text input and file input (upload). To do so, you may add the respective `validateTextInput` and `validateFileInput` attributes to any Block that requires validation. The `validateTextInput` attribute is a function that receives the user's input (string) and returns an object indicating the validation result. The `validateFileInput` attribute is a function that receives the user's uploaded files (FileList) and similarly returns an object indicating the validation result. An example can be seen below:\r\n\r\n```javascript\r\nimport ChatBot from \"react-chatbotify\";\r\nimport InputValidator from \"@rcb-plugins/input-validator\";\r\n\r\nconst MyComponent = () =\u003e {\r\n  const flow = {\r\n    start: {\r\n      message: \"What is your age?\",\r\n      validateTextInput: (userInput) =\u003e {\r\n        if (isNaN(userInput)) {\r\n          return {\r\n            success: false,\r\n            promptContent: \"Age must be a number!\",\r\n            promptDuration: 3000,\r\n            promptType: 'error',\r\n            highlightTextarea: true,\r\n          };\r\n        }\r\n        return { success: true };\r\n      },\r\n    },\r\n    // ... other blocks\r\n  };\r\n\r\n  return (\r\n    \u003cChatBot plugins={[InputValidator(pluginConfig)]}/\u003e\r\n  )\r\n}\r\n```\r\n\r\nAs you can see from the example above, `validateTextInput` takes in a `userInput` (string) parameter and returns an object representing the validation result. The validation result contains a total of 5 properties described in the table below:\r\n\r\n| Property               | Type     | Default Value | Description                                                                                                                                 |\r\n|---------------------|----------|----------|---------------------------------------------------------------------------------------------------------------------------------------------|\r\n| `success`           | boolean  | false      | If `true`, validation passed and user input is allowed to be sent. If `false`, user input is blocked.                                       |\r\n| `promptContent`     | string   | \"\"       | The message displayed to the user if validation fails (e.g., \"Age must be a number!\").                                                      |\r\n| `promptDuration`    | number   | 3000      | The duration (in milliseconds) that the prompt message is shown.                                                                            |\r\n| `promptType`        | string   | \"info\"       | Defines the type of prompt to display (e.g., \"error\", \"warning\", etc.), which influences styling and colors set in plugin configurations.   |\r\n| `highlightTextArea` | boolean  | true       | If set to `true`, highlights the input text area according to validation result, providing more visual feedback.                            |\r\n\r\nNote that all above properties have default values assigned to them. This means that if the `validateTextInput` attribute does not return an expected object, validation fails by default since `success` would be `false`.\r\n\r\n### Team\r\n\r\n* [Tan Jin](https://github.com/tjtanjin)\r\n\r\n### Contributing\r\n\r\nIf you have code to contribute to the project, open a pull request from your fork and describe \r\nclearly the changes and what they are intended to do (enhancement, bug fixes etc). Alternatively,\r\nyou may simply raise bugs or suggestions by opening an issue.\r\n\r\n### Others\r\n\r\nFor any questions regarding the project, please reach out for support via **[discord](https://discord.gg/J6pA4v3AMW).**\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-chatbotify-plugins%2Finput-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-chatbotify-plugins%2Finput-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-chatbotify-plugins%2Finput-validator/lists"}