jcubic/tagger

Add events

jcubic opened this issue · 3 comments

Events are required for proper use in React to have proper binding.

  • Add change event
  • update React example to display all tags while they are changing

@jcubic I don't use ReactJS, however if native vanilla javascript change event is implemented, is there anything more for ReactJS support? State could be updated via the onChange react handler.

import { useRef, useState, useEffect } from 'react'
import tagger from '@jcubic/tagger'

function App() {
  const [tags, setTags] = useState(null)
  const inputRef = useRef(null)

  // Write the Tagger code inside a useEffect hook
  // It will run when the component is initially rendered
  useEffect(() => {
    // Define the Tagger options
    const taggerOptions = {
      allow_spaces: true,
    }

    // Initialize Tagger
    tagger(inputRef.current, taggerOptions)
  }, [])

  return (
    <div className='app'>
      <input type='text' defaultValue='charles, louis, michel' ref={inputRef} onChange={e => setTags(e.target.value)} />

      {tags && <pre>{tags}</pre>}
    </div>
  )
}

export default App
jcubic commented

Yea, you're right. I closed the PR too soon. I just wanted to have more events, but maybe they are not needed. I will checkout the PR locally add semicolons and merge.

jcubic commented

The PR got merged. I've changed the origin issue to only include the change event.