Skip to content

Latest commit

 

History

History
87 lines (64 loc) · 2.79 KB

README.md

File metadata and controls

87 lines (64 loc) · 2.79 KB
Raw

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

gif ce

Example #2 - Email Validation

validation gif

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 😄