Skip to content

Instantly share code, notes, and snippets.

@sb8244
Last active April 13, 2022 17:52
Show Gist options
  • Save sb8244/9d60231e1d13c177ec8de20d22b9ec8d to your computer and use it in GitHub Desktop.
Save sb8244/9d60231e1d13c177ec8de20d22b9ec8d to your computer and use it in GitHub Desktop.
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(this.el.id, {
editorOpts: this.editorOpts()
})
}).catch(console.error)
},
destroyed() {
if (!this.unmountComponent) {
console.error('SpaceLayoutEditor unmountComponent not set')
return
}
this.unmountComponent(this.el)
},
}
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)
render(
<App {...opts} />,
rootElement
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment