react-simple-format

The port of Rails's simple_format to React.

Usage

Turns double newlines into different paragraphs. See examples for live examples.

const forwardText = "You can't connect the dots looking forward;\n\nYou can only connect them looking backward."
 
<SimpleFormat text={ forwardText } />

This will render:

<div>
  <p>You can't connect the dots looking forward;</p>
  <p>You can only connect them looking backward.</p>
</div>

Props

wrapperTag (string/react class)

Default is 'div', but you can change it to something else:

<SimpleFormat text={ ... } wrapperTag='article' />
 
↓
 
<article>
  ...
</article>
 
---
 
<SimpleFormat text={ ... } wrapperTag={ SomeComponent } />
 
↓
 
<SomeComponent>
  ...
</SomeComponent>

wrapperTagProps (object)

props for the wrapper tag.

postfix (node)

Allows you to add a node at the end of the last p tag.

<SimpleFormat text={ ... } postfix='foo' />
 
↓
 
<div>
  <p>...</p>
  <p>...foo</p>
</div>

Credits

• rilkevb
• chibicode

License

MIT