input-on-drugs v1.0.1

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

Note: Currently the onChangeOD only accepts 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

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 - sarthak.bakre@gmail.com

Thank You 😄