Skip to content

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.

License

Notifications You must be signed in to change notification settings

Sardar1208/input-on-drugs

Repository files navigation

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

Thank You 😄

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published