react-bindable-function-components

React Function Component With Methods

Example usage:

import React, { useRef, useEffect } from "react"
import ReactDOM from "react-dom"
import Bindable from "react-bindable-function-components"

const App = () => {
  const ref = useRef<Binds>(null)

  useEffect(() => {
    // usage here
    console.log(ref.current.text)
    setInterval(() => ref.current.reset("bye"), 2000)
  }, [])

  return <Input ref={ref} placeholder="input" />
}

interface Binds {
  reset: React.Dispatch<React.SetStateAction<string>>
  text: string
}

interface Props {
  placeholder?: string
}

const Input = Bindable<Binds, Props>(({ bind, ...restProps }) => {
  const [text, setText] = React.useState("hello")
  const handleOnChange = (e) => setText(e.target.value)

  bind("text", text)
  bind("reset", setText)

  return <input {...restProps} value={text} onChange={handleOnChange} />
})

ReactDOM.render(<App />, document.getElementById("container"))