Skip to content

Instantly share code, notes, and snippets.

Last active April 13, 2022 17:52
What would you like to do?
Example hooks + React mounter for LiveView application
export const SpaceLayoutEditor = {
mounted() {
// I use webpack chunks to reduce LiveView entry file size
import(/* webpackChunkName: "space-layout-editor-lv" */ '../entry/space-layout-editor-lv').then((mounter) => {
this.unmountComponent = mounter.default(, {
editorOpts: this.editorOpts()
destroyed() {
if (!this.unmountComponent) {
console.error('SpaceLayoutEditor unmountComponent not set')
import { unmountComponentAtNode } from 'react-dom'
import { AppOpts } from '../space_editor/App'
import mountEditor from '../space_editor/mount'
export default function mount(id: string, opts: AppOpts) {
mountEditor(id, opts)
return (el: Element) => {
if (!unmountComponentAtNode(el)) {
console.warn('unmount failed', el)
import React from 'react'
import { render } from 'react-dom'
// This is just illustrating that you can include additional CSS in your App, just like you normally would
// Again, the application is self-contained as much as possible
import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
// It doesn't really matter what this App is. It's a plain ol' React component
import App from './App'
export default function mount(id: string, opts: any) {
const rootElement = document.getElementById(id)
<App {...opts} />,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment