This is a React component for writers-mark.

npm install writers-mark-react

The WritersMark will simply render the passed text as is.

import {WritersMark} from 'writers-mark-react';

export const MyComponent = () {
  return <WritersMark text="Hello World"/>
} 

<StyleProvider> will apply the provided style to all its children.

import {WritersMark, StyleProvider} from 'writers-mark-react';

export const MyComponent = () {
  return (
    <StyleProvider text="span * {font-weight: bold;}">
      <WritersMark text="Hello *World*"/>
    </StyleProvider>
    )
} 

N.B. Nothing stops you from having multiple <StyleProvider> in the same hierarchy.

If you want to specify the CSS whitelist, or (eventually) other writer's mark options, you can use <ContextProvider>:

import {WritersMark, StyleProvider, ContextProvider} from 'writers-mark-react';

export const MyComponent = () {
  const options = { 
    whitelist: {
      para: ['text-align', 'margin', 'margin-left'],
      span: ['font-weight'],
      cont: [],
    }
  };

  return (
    <ContextProvider options={options}>
      <StyleProvider text="span * {font-weight: bold;}">
        <WritersMark text="Hello *World*"/>
      </StyleProvider>
    </ContextProvider>
    )
}