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.

Usage no npm install needed!

<script type="module">
  import reactInputWithHtml from 'https://cdn.skypack.dev/react-input-with-html';
</script>

README

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

NPM JavaScript Style Guide bundle size

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| |hexDot|info for how to show hex dots after hex codes|Obj|

hexDot obj = { enable: boolean style: { width: string height: string top: string left: string } }

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