settingsPage

A card the plugin draws itself on its page in Server › Plugins, under the settings Hodi draws for it. It is for what plain settings can't do: a button to test, a list, statistics…

Where in Hodi

The server admin opens Server › Plugins, then a plugin's page. This page shows, from top to bottom:

1. The plugin's name, its version and its switch.
2. Options: the settings Hodi draws.
3. The settingsPage card, which the plugin draws.
4. The buttons to delete the plugin.

The plugin only draws the settingsPage card. The rest of the page comes from Hodi.

Example

Hello world puts a Say hello button in this card. A click on this button calls the /hello route, then the card shows the answer:

import { Button, SettingRow, definePlugin, usePluginApi } from 'hodi:sdk'
import { useState } from 'react'

const HelloCard = () => {
  const api = usePluginApi()
  const [text, setText] = useState('Your route\'s answer')
  const sayHello = async () => {
    const answer = await api('/hello', { method: 'POST' })
    setText((await answer.json()).text)
  }
  return (
    <SettingRow label="Say hello" hint={text}>
      <Button compact onClick={sayHello}>
        Say hello
      </Button>
    </SettingRow>
  )
}

definePlugin({ settingsPage: HelloCard })

Good to know

• What Hodi gives the component: no prop.
• The card's data: the plugin's routes, with usePluginApi().
• Who sees the card: the server admin only, like the whole page.
• When the card shows: only when the plugin is on.
• How the card is drawn: with SettingRows, like the settings above it.