Custom Components

To write your own components and make them available to be used in views, you have to do two things:

• In the scheme object, create a property that uses the key as the name your component will be known as and value as the relative path to the component .js file (relative to the rebase-manifest.json file - not the scheme file).

• Create the view's actual implementation .js file.

Example scheme entry:

{
  ...,
  "components": {
    "MyCustomComponent": "src/adminpanel/components/my-custom-component.js"
  }
}

Example implementation of my-custom-component.js:

import { html, Component } from './rebase-ui-runtime'
import Text from './components/Text'

export default class MyComponent extends Component {
  render = () => {
    return html`<${Text} text="Hello world!" />`
  }
}

When using other or builtin-components, import them from the ./components/ sub directory.

For writing the component itself, just like writing views, adhere to the Preact and HTM way of writing components.

When using your written component from a view or from another component, import and use them like this:

import { html, Component } from './rebase-ui-runtime'
import MyComponent from './components/MyCustomComponent'

export default class MyViewOrComponent extends Component {
  render = () => {
    return html`
      <>
        <${MyComponent} />
      </>
    `
  }
}