input-on-drugs

An input field that lets you style the text by inserting HTML into it as you wish. All of this happens as you type in real time.

Installation

npm install input-on-drugs

Example #1 - JavaScript syntax highlighting

Example #2 - Email Validation

Usage

import { InputOD, highlightWords } from 'input-on-drugs';

const styles = {
  input: {
    border: '1px solid #1e90ff',
    borderRadius: '5px',
    padding: '5px 15px',
    fontSize: '16px',
    color: '#333',
    backgroundColor: '#f0f8ff',
    transition: 'all 0.3s ease-in-out',
    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
  },
};

<InputOD
  onChangeOD={text => {
    let html = highlightWords(text, ['_', '|'], {
      style: 'color: red; font-weight: bold;',
      onlyHighlightIndependentWord: false,
    });
    return html;
  }}
  inputStyle={styles.input}
/>

InputOD props

Prop Name	Type	Description
onChangeOD	function	Provides the current text in the input. Return upgraded HTML to style the text
inputStyle?	object	The styles for the input's outer container
textStyle?	object	The styles for the input's text
initialText?	string	Text that is initialy present in the input field
onFocus?	function	Triggered when the input is focused
onBlur?	function	Triggered when the input is blurred

Note: Currently the onChangeOD only accepts text and span nodes. If you pass any other nodes in the HTML then it will be converted to a span node.

Helper Methods

This package also provides some helper functions to help in the text processing stage some common situations:

highlightText(
  text: string,
  wordsToHighlight: string[],
  options?: HighlightOptions
): 

Takes in plain text and returns styled HTML based on the cofiguration provided.

HighlightOptions

Param name	Type	Description
style	string	The styles for the text that is being highlighted
onlyHighlightIndependentWord?	boolean	if you want to only highlight the word in isolation

Notes from author

This package is currently a work in progress. If you have any suggestions or ideas to expand it, then ping me at - [email protected]

Thank You 😄