Have ideas to improve npm?Join in the discussion! ¬Ľ

    @render-props/paragraphs

    0.1.14¬†‚Äʬ†Public¬†‚Äʬ†Published

    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:

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

    Installation

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


    Usage

    import Paragraphs from '@render-props/paragraphs'
     
     
    function MyParagraphs ({text}) {
      return (
        <Paragraphs text={text}>
          {({key, text, n, count}) => (
            <p
              key={key}
              className={n === count - 1 ? 'margin--b0' : 'margin--b3'}
              children={text}
            />
          )}
        </Paragraphs>
      )
    }
     
    MyParagraphs({text: 'foo\n\nbar\n\nbaz\nboz'})
     
    /*
    Outputs:
    <p className='margin--b3'>
      foo
    </p>
    <p className='margin--b3'>
      bar
    </p>
    <p className='margin--b0'>
      baz
      <br/>
      boz
    </p>
    */

    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

    Install

    npm i @render-props/paragraphs

    DownloadsWeekly Downloads

    4

    Version

    0.1.14

    License

    MIT

    Unpacked Size

    10 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar