Component Manager

Provides a registry for React components that you'd like to display on layouts. An instance of this class is always available as the inkdrop.components global.

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.

module.exports = {
  activate() {
    inkdrop.components.registerClass(MyDialog)
    inkdrop.layouts.addComponentToLayout('modal', 'MyDialog')
  },

  deactivate() {
    inkdrop.layouts.removeComponentFromLayout('modal', 'MyDialog')
    inkdrop.components.deleteClass(MyDialog)
  },
}

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'

export const useCustomComponent = <T extends ComponentType<any>>(className: string, DefaultComponent: T) => {
  const { components } = inkdrop
  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
}

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

inkdrop.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

inkdrop.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

inkdrop.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
})