react-input-with-html

A react input component that uses contenteditable on a div to display the input value with html cut in for that touch of fancy

Install

npm install --save react-input-with-html

Usage

This is starting as a bit of a custom thing for Stocksy, but I plan on making it into a more broadly useful library.

Most of the custom props and usage just arn't in this readme.

Use this at your own risk for now.

import React, { useState } from 'react'
import HTMLInput from 'react-input-with-html'
// have to import style sheet for basic input styles and special hex option style
import 'react-input-with-html/dist/index.css'

const App = () => {
  const [input, setInput] = useState('')

  const handleSubmit = () => {
    // submit what is in the input state however you want here
    console.log('input on submit: ', input)
  }

  // basic style for +'s
  const modifierArr = [
    {
      regexMatch: /\+/g,
      htmlMod: `<span style="color: #a3a3a3">+</span>`
    }
  ]

  return (
    <HTMLInput
      id='input'
      value={input}
      onChange={setInput}
      onSubmit={handleSubmit}
      modifierArr={modifierArr}
      spellCheck={false}
      hexDot={true}
    />
  )
}

Available props

prop	description	type
id	required: unique id	String
modifierArr	required: more on this below	Array of Objects
disabled	use true to disable editing	Boolean
onChange	required: react hook for keeping input state	Function
onBlur	called whenever the html element is blurred	Function
onFocus	event fires when an element has received focus	Function
onKeyUp	called whenever a key is released	Function
onKeyDown	called whenever a key is pressed	Function
spellCheck	toggles auto underlining spelling errors	Boolean

Modifier Arr

This is the customizable part of this component.

You need to pass an Array of ModifierObj(s) see type below

type ModifierObj = {
  regexMatch: RegExp
  htmlModification: string | Function // need better function definition, it has to return a html represented as string
}

The regexMatch is a regular expression to find the instances you want to modify

The htmlModification is the string that includes the html for what you're changing it to. This can be a string or a function that returns the string.

put examples here...

Playground

will be more of a playground in the future

Try it out

Important Notes

don't use v1 of this library. It's a very limited concept with lots of bugs.

License

MIT © cbot83