Clean-speech NPM

clean-speech: preemptively sanitize user text inputs

A lightweight and customizable library to censor words in a textarea or input and display a toast message when a censored word is detected.

Written in:

clean-speech This demo uses 'badword1', 'badword2', and 'badword3' user-typed bad words.

Installation

npm install clean-speech

Usage

Import the censorInput function and call it with a configuration object:

import censorInput from 'clean-speech';

censorInput({
  textareaSelector: '#text-area',
  censoredWords: ['badword1', 'badword2', 'badword3'],
});

Configuration Options

The censorInput function accepts a configuration object with the following properties:

Property	Type	Required	Default	Description
textareaSelector	string	Yes		A CSS selector for the textarea element to be censored.
censoredWords	string[]	No	`[]`	An array of words to be censored.
toastMessage	string	No	`'Please use nicer language!'`	The message to be displayed in the toast.
toastStyle	Partial	No	Default styles	An object containing the CSS styles for the toast.
toastDuration	number	No	`3000`	The duration for which the toast is displayed (in milliseconds).
fadeDuration	number	No	`500`	The duration of the toast fade-out animation (in milliseconds).

Example

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Text Area Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
    </style>
    <script src="./src/index.js" defer></script>
  </head>
  <body>
    <h1>Text Area Example</h1>
    <label for="text-area">Enter some text:</label>
    <textarea id="text-area" rows="4" cols="50"></textarea>
  </body>
</html>

index.js:

import censorInput from 'censor-input';

censorInput({
  textareaSelector: '#text-area',
  censoredWords: ['badword1', 'badword2', 'badword3'],
  toastMessage: 'Please use nicer language!',
  toastStyle: {
    backgroundColor: 'rgba(255, 59, 48, 0.8)',
  },
  toastDuration: 1000,
  fadeDuration: 200,
});

In this example, the censorInput function is called with a configuration object that specifies the textarea selector, censored words, toast message, custom toast background color, toast duration, and fade duration.

censor input textarea profanity filter badwords text validation toast notification language sanitization

@everything-registry/sub-chunk-1334

0.0.1

1 year ago