CommandButton

A built-in React component of Inkdrop that extends Button. When clicked, it dispatches an Inkdrop command, and its tooltip automatically shows the command's keybinding.

To get the class of the CommandButton component:

import type { CommandButtonProps } from '@inkdropapp/types'

const CommandButton =
  env.components.getComponentClass<CommandButtonProps>('CommandButton')

Props

CommandButton accepts all Button props in addition to the following:

type CommandButtonProps = ButtonProps & {
  // The command to dispatch when the button is clicked.
  command?: string
  // The DOM element to dispatch the command on. Defaults to document.body.
  commandTarget?: HTMLElement
  // The detail payload passed with the dispatched command.
  commandDetail?: any
}

Example

import React from 'react'
import type { CommandButtonProps } from '@inkdropapp/types'

import { getEnv } from './env'

const SaveButton: React.FC = () => {
  const CommandButton =
    getEnv().components.getComponentClass<CommandButtonProps>('CommandButton')

  return (
    <CommandButton primary command="core:save-note">
      Save
    </CommandButton>
  )
}

export default SaveButton

getEnv() is the small helper — shown in the Word Count plugin walkthrough — that captures the Environment handed to activate() so components can reach it too.

CommandButton

Props

Example

See also