Set custom renderer for a single hyperForm Instance

[n1ru4l]

It is possible to set the global renderer (https://hyperform.js.org/examples.html#file=global_message).
I wanted to ask if it is possible to set a renderer for a single hyperform instance via the constructor. Otherwise this would be a feature request :)

[Boldewyn]

Thanks for the suggestion! No, it's not possible currently, but I toyed with that thought myself. Out of interest, how would your use case look like? (I.e., what would a specific form renderer need, that a global one can't provide?)

[n1ru4l]

I am currently implementing a form like in the example and I thought about the fact that in the future there could be an other form on the same page. In that situation, both should render their errors in their own error container. You could put some logic into the render function to do this - imho you could make this simpler by allowing to declaring the renderer per instance.

In my case I could do something like this, to create render functions for the different form instances:

function createGlobalRenderFunction(errorContainer) {
  return function attachWarningRenderer(warning, element) {
    const childNodeArray = Array.prototype.slice.apply(errorContainer.childNodes);
    if (childNodeArray.every(node => node.id !== warning.id)) {
      errorContainer.appendChild(warning)
    }
  }
}

const form1 = document.querySelector('[data-contact-form]')
const attachWarningRenderer1 = createGlobalRenderFunction(
  form1.querySelector('[data-errors]')
)
const $formInstance1 = hyperform(form1, { 
  renderer: { type: `attachWarning`, handler: attachWarningRenderer1 }
})

const form2 = document.querySelector('[data-contest-form]')
const attachWarningRenderer2 = createGlobalRenderFunction(
  form2.querySelector('[data-errors]')
)
const $formInstance2 = hyperform(form2, { 
  renderer: { type: `attachWarning`, handler: attachWarningRenderer2 }
})