Hello Remirror

The most straightforward way of using remirror is to get start with a prebuilt editor. In a later section of this quide I'll walk you through creating your own editor but for now there's enough to learn in consuming the readily available components.

The most popular editor for a long time has been the social editor.

First make sure you've followed the instructions in the installation guide.

Then you'll need to import the relevant code.

import React, { useCallback, useMemo, useState } from 'react';
import { SocialEditor } from 'remirror/react/social';

This import gives you access to the social editor. Now let's wire it up with some example data. In reality you'd be fetching this data from an API.

const exampleUsers: [] = [
{
avatarUrl: 'https://api.adorable.io/avatars/100/tolu@adorable.io.png',
displayName: 'Tolu',
username: 'tolu',
href: '//test.com/tolu',
id: 'tolu',
},
{
avatarUrl: 'https://api.adorable.io/avatars/100/timi@adorable.io.png',
displayName: 'Timi',
username: 'timi',
href: '//test.com/tolu',
id: 'timi',
},
{
avatarUrl: 'https://api.adorable.io/avatars/100/olu@adorable.io.png',
displayName: 'Olu',
username: 'olu',
href: '//test.com/olu',
id: 'olu',
},
{
avatarUrl: 'https://api.adorable.io/avatars/100/tope@adorable.io.png',
displayName: 'Tope',
username: 'tope',
href: '//test.com/tope',
id: 'tope',
},
];
const exampleTags: TagData[] = [
{ tag: 'FunTime', href: '//test.com/funtime', id: 'funtime' },
{ tag: 'StaySafe', href: '//test.com/staysafe', id: 'staysafe' },
{ tag: 'MaskUp', href: '//test.com/maskup', id: 'maskup' },
{ tag: 'RollOut', href: '//test.com/rollup', id: 'rollup' },
{ tag: 'BeBold', href: '//test.com/bebold', id: 'bebold' },
{ tag: 'BeStrong', href: '//test.com/bestrong', id: 'bestrong' },
{ tag: 'YouAreMighty', href: '//test.com/youaremighty', id: 'youaremighty' },
{ tag: 'WelcomeChampion', href: '//test.com/welcomechampion', id: 'welcomechampion' },
];

Now that the data is available let's use it.

Live Editor
Result

Try typing into the editor by using the @ symbol for mentions and the # character for tags. You can also see how it works with : for emoji.