Search code examples
javascriptreactjstypescriptreact-hookspartial-application

How to inject parameters into return function with custom hook react

Usually when we use <input /> field in html, we get a callback function such as <input onChange = {(event) => console.log(event.target.value)} How is this event argument passed back to us?

I am trying to do something similar, where I use a custom hook that, when called, does some other logic, and then can return back callback functions and inject arguments into them. For example:

const hello = useHello({
    arg1 : 'person name',
    onSuccess : (response) => {
         // I can now use the response
    }
});
Solution

  • In your hook you just create a response however you need to, and then pass it to the onSuccess function that was passed in.

    For example:

    function useHello({
  arg1,
  onSuccess
}: {
  arg1: string,
  onSuccess: (response: Response) => void
}) {
  fetch(`/?${arg1}`).then((res) => {
    onSuccess(res)
  })
}

    Playground