## Standard Preact hooks

All standard Preact hooks are available as an import in `trilium:api`.

For example:

    import { useState } from "trilium:preact";
    const [ myState, setMyState ] = useState("Hi");

## Custom hooks

Trilium comes with a large set of custom hooks for Preact, all of which are also available to custom widgets and Render Note.

### `useNoteContext`

As a replacement to Note context aware widget, Preact exposes the current note context in the `useNoteContext` hook:

    import { defineWidget, useNoteContext, useNoteProperty } from "trilium:preact";

    export default defineWidget({
        parent: "note-detail-pane",
        position: 10,
        render: () => {
            const { note } = useNoteContext();
            const title = useNoteProperty(note, "title");
            return <span>Current note JSX: {title}</span>;
        }
    });

Note that the custom widget must be inside the content area (so note detail widget) for this to work properly, especially when dealing with splits.

### `useActiveNoteContext`

`useActiveNoteContext` is an alternative to `useNoteContext` which works even if the widget is not within the note detail section and it automatically switches the note context as the user is navigating around between tabs and splits.

### `useNoteProperty`

This hook allows “listening” for changes to a particular property of a `FNote`, such as the `title` or `type`of a note. The benefit from using the hook is that it actually reacts to changes, for example if the note title or type is changed.