Skip to content
Using ProseMirror to build a React rich text box with mentions, hashtags, etc.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cypress
public
src
.gitignore
.prettierrc
cypress.json
package.json
readme.MD
yarn.lock

readme.MD

React ProseMirror

A React wrapper for ProseMirror, alternative for DraftJS. Provides easy to use Rich Text, mentions, hashtags, etc.

Basic Usage

import ReactProseMirror from './components/ReactProseMirror'

export default () => <ReactProseMirror />

Reference

Props

Prop Name Description
id HTML id property
label TBD
defaultValue Uncontrolled: JSON-serializeable representation of a node. Read this guide for understanding
value Controlled React Component: JSON-serializeable representation of a node. Read this guide for understanding
onChange Controlled React Component: Callback when the content has changed. For example:
onChange={newContent => setContent(newContent)}
mentions "immutable" - for immutable hashtag & person mentions
"mutable" - accepting any word prefixed by # as a hashtag. Not supported at the moment
hashtagSuggestions Array of strings beginning with # to suggest
multiline Allow multiline

Example:

const [hashtagListDynamic, setHashtagListDynamic] = useState(['#office', '#home'])

<ReactProseMirror
  id="prosemirror-hashtag-mutables"
  label="Hastag Prosemirror"
  hashtagSuggestions={hashtagListDynamic}
  hashtags="mutable"
  multiline
  onNewHashtag={hashtag =>
    setHashtagListDynamic([...hashtagListDynamic, hashtag])
  }
/>
You can’t perform that action at this time.