@biruk/react-simple-format

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