trilium/docs/User Guide/User Guide/Scripting/Frontend Basics/Preact/Component libraries.md

Component libraries

Using the concept of Script bundles, it's possible to create components that are shared for multiple widgets or Render Note.

Exporting a single component

This is generally useful for big components.

Here's an example child hierarchy using Render Note: 

• My render note
  Note type: Render Note
  Link ~renderNote to the child note (Render note with subcomponents)

  • Render note with subcomponents
    Type: JSX

    export default function() {
        return (
            <MyComponent />        
        );
    }
    

    • MyComponent
      Type: Code / JSX

      export default function MyComponent() {
          return <p>Hi</p>;
      }
      

Multiple components per note

To export multiple components, use the export keyword next to each of the function components.

Here's how a sub-note called MyComponents would look like:

export function MyFirstComponent() {
    return <p>First</p>;
}

export function MySecondComponent() {
    return <p>Bar</p>;
}

Then in its parent note:

const { MyFirstComponent, MySecondComponent } = MyComponents;

export default function() {
    return (
        <>
            <MyFirstComponent />
            <MySecondComponent />
        </>
    );
}

Alternatively, it's also possible to use the components directly without assigning them to a const first:

<MyComponents.MyFirstComponent />
<MyComponents.MySecondComponent />