Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including rowriter-react with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("styled-jsx/package.json"); // styled-jsx is a peer dependency. var rowriterReact = require("rowriter-react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rowriter-react v0.5.2

A react component that makes nicely proportioned rows of components.

RoWriter-React

RoWriter-React is a react component that takes an array of components and renders them in evenly proportioned rows, based on a max number of items per row.

Using css flex-box, for instance, if you had 13 objects and each row could fit 12 objects, then the css would give you a full row of 12 objects and a second row of 1 object. RoWriter would give you a row of 7 objects and a row of 6 objects, which is more aesthetically balanced.

RoWriter calculates the minimum number of rows it will take to display your items, and then distributes the items evenly in those rows, so the rows are as short as possible.

Here’s how you install RoWriter-React via terminal from the root directory of your project.

npm install rowriter-react

Then import RoWriter-React into your component.

import React from 'react'

import RoWriter from 'rowriter-react'

RoWriter requires two props two work: items and maxWidth. Items should be an array of components, and maxWidth is a whole number.

<RoWriter items={[...arrayOfComponents]} maxWidth='3'/>

RoWriter takes additional props for more customization. rowComponent allows you to replace the default component that contains each row of items. className allows you to give the wrapper a class.

const RoWriterComponent = (props) => {

const CustomRow = (props) => {

    return(
    <div style={{ 
        
        display: 'flex',
        justifyContent: 'center'}}>
    
    {props.children}
    
    </div>)

}


return(
<RoWriter items={[...arrayOfComponents]} maxWidth='3' className='myRoWriter' rowComponent={ CustomRow }/>
)}

One thing to keep in mind is that RoWriter-React is not sensitive to browser width on it’s own, so if you want it to render differently based on window width, you’ll need to create your own logic that adjusts maxWidth dynamically.

Find more here

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free