Paragraphs

A function as child component which provides an interface for creating paragraphs with line breaks from raw text with \n new lines. The default render child is:

1const defaultParagraph = props => <p key={props.key} children={props.text}/>

Installation

yarn add @render-props/paragraphs or npm i @render-props/paragraphs

---

Usage

1import Paragraphs from '@render-props/paragraphs'
2
3
4function MyParagraphs ({text}) {
5  return (
6    <Paragraphs text={text}>
7      {({key, text, n, count}) => (
8        <p
9          key={key}
10          className={n === count - 1 ? 'margin--b0' : 'margin--b3'}
11          children={text}
12        />
13      )}
14    </Paragraphs>
15  )
16}
17
18MyParagraphs({text: 'foo\n\nbar\n\nbaz\nboz'})
19
20/*
21Outputs:
22<p className='margin--b3'>
23  foo
24</p>
25<p className='margin--b3'>
26  bar
27</p>
28<p className='margin--b0'>
29  baz
30  <br/>
31  boz
32</p>
33*/

---

Props

• text {string}
  • the text you want to turn into paragraphs with line breaks

Render Props

State

• text (value <!== undefined>)
  • the text in this paragraph with line breaks included
• n
  • the current paragraph index
• count
  • the total number of paragraphs