Package Exports

@remirror/react
@remirror/react/dist/react.browser.cjs.js
@remirror/react/dist/react.browser.esm.js
@remirror/react/dist/react.cjs.js
@remirror/react/dist/react.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@remirror/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@remirror/react

The react components for the remirror editor

Installation

yarn add @remirror/react@next @remirror/pm@next @remirror/react/@next # yarn
pnpm add @remirror/react@next @remirror/pm@next @remirror/react/@next # pnpm
npm install @remirror/react@next @remirror/pm@next @remirror/react/@next # npm

Usage

For in depth usage with proper code example see the docs.

Controlled Editor

The following example converts all the content to text and appends a list item to the end of every editor after every edit.

Don't do this, as it would actually be a terrible user experience. But it shows what can be done. A more meaningful example will be created soon.

import React, { useCallback } from 'react';
import { BoldExtension } from 'remirror/extension/bold';
import { ListPreset } from 'remirror/preset/list';
import { fromHtml, RemirrorEventListener } from 'remirror/core';
import {
  RemirrorProvider,
  createReactManager,
  ReactCombinedUnion,
  useManager,
} from 'remirror/react';

type Combined = ReactCombinedUnion<ListPreset | BoldExtension>;

const EditorWrapper = () => {
  const boldExtension = new BoldExtension();
  const listPreset = new ListPreset();
  const manager = useManager<Combined>([boldExtension, listPreset]);

  const initialValue = manager.createState({
    content: '<p>This is the initial value</p>',
    stringHandler: fromHtml,
  });

  const [value, setValue] = useState(initialValue);

  const onChange: RemirrorEventListener<Combined> = useCallback(
    ({ getText, createStateFromContent }) => {
      const newValue = createStateFromContent(`${getText()}<ul><li>Surprise!!!</li></ul>`);
      setValue(newValue);
    },
    [],
  );

  return (
    <RemirrorProvider manager={manager} stringHandler={fromHtml} value={value} onChange={onChange}>
      <div />
    </RemirrorProvider>
  );
};