lifecycle-events.md

Lifecycle Events

Lifecycle events are custom event handlers invoked at various points in the life of a virtual node.

They are useful for starting animations, wrapping third party libraries that require a reference to a DOM element, etc.

oncreate

Type: (element)

Fired after an element is created and added to the DOM.

onupdate

Type: (element)

Fired when the element's data is updated.

onremove

Type: (element)

Fired before the element is removed from the DOM.

Note that when using this event you are responsible for removing the element yourself.

if (element.parentNode) {
  element.parentNode.removeChild(element);
}

Example

This example shows how to create a custom tag to wrap the CodeMirror editor.

Try it online

const node = document.createElement("div")
const editor = CodeMirror(node)

const Editor = props => {
  const setOptions = props =>
    Object.keys(props).forEach(key =>
      editor.setOption(key, props[key]))

  return (
    <div
      oncreate={element => {
        setOptions(props)
        element.appendChild(node)
      }}
      onupdate={() => setOptions(props)}
    />
  )
}