Component Manager

Provides a registry for React components that you'd like to display on layouts. Available as env.components on the Environment passed to activate(env).

Registering and unregistering a React component

You can register your React component classes to the component registry. Then, the registered components can be added to layouts. Below example registers MyDialog class to the component registry and adds it to modal layout so that you can show it as a modal view.

import type { Environment, IInkdropPlugin } from '@inkdropapp/types'

class YourPlugin implements IInkdropPlugin {
  activate(env: Environment) {
    env.components.registerClass(MyDialog)
    env.layouts.addComponentToLayout('modal', 'MyDialog')
  }

  deactivate(env: Environment) {
    env.layouts.removeComponentFromLayout('modal', 'MyDialog')
    env.components.deleteClass(MyDialog)
  }
}

export default new YourPlugin()

Using a registered component

When using a custom component registered in the component manager, you may want to observe when the component is registered or unregistered. It can be accomplished by creating a custom hook as below:

import { ComponentType, useEffect, useState } from 'react'
import { CompositeDisposable } from 'event-kit'
import { getEnv } from './env'

export const useCustomComponent = <T extends ComponentType<any>>(className: string, DefaultComponent: T) => {
  const { components } = getEnv()
  const initialComponent = (components.getComponentClass(
    className
  ) as T) || DefaultComponent
  const [{ c: Component }, setComponent] = useState<{ c: T }>({ c: initialComponent })

  useEffect(() => {
    const disposables = new CompositeDisposable()
    disposables.add(
      components.onClassRegistered<T>(className, (klass) => setComponent({ c: klass })),
      components.onClassDeleted(className, () => setComponent({ c: DefaultComponent }))
    )
    return () => disposables.dispose()
  }, [className, DefaultComponent])

  return Component
}

getEnv() is the small helper — shown in the Word Count plugin walkthrough — that captures the Environment handed to activate() so code outside of it, like this hook, can still reach it.

registerClass(reactComponent, componentName)

Register a component

Registers a given React component class to the component registry.

Parameters

Name
reactComponent
Type
React.Component
Required
Description
A React component class to be added.
Name
componentName
Type
string
Description
A custom component class name. It is necessary if the given component is HOC (Higher-Order Component).

Example

env.components.registerClass(MyDialog)

deleteClass(reactComponent, componentName)

Delete a component

Unregisters a given React component class from the component registry.

Parameters

Name
reactComponent
Type
React.Component
Required
Description
A React component class to be removed.
Name
componentName
Type
string
Description
A custom component class name. It is necessary if the given component is HOC (Higher-Order Component).

Example

env.components.deleteClass(MyDialog)

getComponentClass(componentName)

Get a component

Returns a React component that has a given component name.

Parameters

Name
componentName
Type
string
Required
Description
A component class name to get.

Returns

A React component class that matched the given class name, or undefined if not found.

Example

env.components.getComponentClass("MyDialog")

onClassRegistered(componentName, callback)

Event: Register

Observe when a component with the given component name is registered.

Parameters

Name
componentName
Type
string
Description
A custom component class name to observe.
Name
callback
Type
<T extends ComponentType>(klass: T) => void
Description
Invoked when a component with the given component name is registered.

Returns

Returns a Disposable.

Example

components.onClassRegistered('CustomNoteListItemView', (klass) => {
  // do something
})

onClassDeleted(componentName, callback)

Event: Delete

Observe when a component with the given component name is unregistered.

Parameters

Name
componentName
Type
string
Description
A custom component class name to observe.
Name
callback
Type
() => void
Description
Invoked when a component with the given component name is unregistered.

Returns

Returns a Disposable.

Example

components.onClassDeleted('CustomNoteListItemView', (klass) => {
  // do something
})