A small set of utilities for react components in remirror.


Keywords
react, utils, remirror, prosemirror, browser, editor, mobile, react-prosemirror, rich-text-editor, text-editor, typescript, wysiwyg
License
MIT
Install
npm install @remirror/react-utils@0.0.0-pr2222.1

Documentation

animated remirror logo

A React toolkit for building cross-platform text editors, based on ProseMirror.


Motivation · Status · Documentation · Storybook · Contributing


Bundled sized of core library Continuous integration badge for automatic releases Continuous integration badge for docs deployment Project maintainability provided by CodeClimate Unit test coverage for the codebase Discord Version Sponsor


Introduction

import React from 'react';
import { BoldExtension, ItalicExtension, UnderlineExtension } from 'remirror/extensions';
import { Remirror, useRemirror, OnChangeJSON } from '@remirror/react';

const extensions = () => [new BoldExtension(), new ItalicExtension(), new UnderlineExtension()];

const Editor = ({ onChange }) => {
  const { manager, state } = useRemirror({
    extensions,
    content: '<p>Hi <strong>Friend</strong></p>',
    stringHandler: 'html',
    selection: 'end',
  });

  return (
    <Remirror manager={manager} initialContent={state}>
      <OnChangeJSON onChange={onChange} />
    </Remirror>
  );
};

With this code snippet your editor now supports basic editing functionality.

Alternatively, take a look at our 5 minute tutorial to get up and running with an out-of-the-box WYSIWYG editor.


Installation

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

If you run into any issues we recommend any of the following:

  • Open an issue in our github repo.
  • Join our discord server and discuss the problem with our community.
  • Create a pull request with your proposed improvement by clicking the edit button on the relevant page.

Whatever you decide thanks for taking the time to explore the remirror project.


Our community

Sponsors

NEXT logo
NEXT
Reflect logo
Reflect

Become a sponsor!

Community spotlight

Benefex logo
Benefex
Cobudget logo
Cobudget
eftax logo
eftax Co., Ltd.
LabKey logo
LabKey
Onethread logo
Onethread

Documentation

View our documentation website here.


Features

  • A11y focused and ARIA compatible.
  • I18n support via lingui.
  • Great support for mobile devices.
  • Out-of-the-box editors, or create own by composing extensions.
  • Create your own extensions for bare-metal ProseMirror integration.
  • Collaborative editing with yjs or prosemirror-collab.
  • 30+ extensions for creating fully customized editing experiences.
  • TypeScript as a first class citizen for great developer experience.

Getting Started

See our 5 minute tutorial to get started!

Contributing

Please read our contribution guide for details on our code of conduct, and the process for submitting pull requests. It also outlines the project structure so you can find help when navigating your way around the codebase.


Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.


License

This project is licensed under the MIT License - see the LICENSE file for details