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.
npm install input-on-drugs
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.
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 |
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 😄