Skip to main content

PlaceholderExtension

Summary​

This extension shows a placeholder when the ProseMirror content of your editor is empty.

Features​

Custom styling​

The placeholder can be styled with a custom CSS class.

Usage​

Installation​

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { PlaceholderExtension } from 'remirror/extensions';

The extension is provided by the @remirror/extension-placeholder package.

Examples​

Source code
import 'remirror/styles/all.css';

import React, { useCallback } from 'react';
import { PlaceholderExtension } from 'remirror/extensions';
import { Remirror, useRemirror } from '@remirror/react';

const Basic = (): JSX.Element => {
  const extensions = useCallback(
    () => [new PlaceholderExtension({ placeholder: `I'm a placeholder!` })],
    [],
  );
  const { manager } = useRemirror({ extensions });

  return <Remirror manager={manager} />;
};

export default Basic;

API​