codekraft-studio / react-justified-layout

reactjs wrapper for flickr justified-layout module

react-justified-layout

reactjs wrapper for flickr justified-layout module

DEMO

Getting started

Install the module and save it to your project dependencies:

npm install @codekraft-studio/react-justified-layout

Import the module in your application:

import JustifiedLayout from '@codekraft-studio/react-justified-layout';

Now you are ready to use the JustifiedLayout component in your app.

---

How does it work?

The component will accept only two props:

• items: An array of items to evaluate.
• options: An object with the options for justified-layout script.

With this in mind you can start using the component in multiple ways.

Basic usage

You can use the component with an array of elements and no options, in this example is used an array of rateo values:

<JustifiedLayout items={[0.8, 0.5, 1.8, 1]}></JustifiedLayout>

If you want to use an array of objects, every object MUST have a width and height properties, like in the example below:

var boxes = [
	{ width: 450, height: 350 },
	{ width: 680, height: 420 },
	{ width: 980, height: 640 }
];

<JustifiedLayout items={boxes}></JustifiedLayout>

Custom options

As per the flickr justified layout module, you can pass various options to customize the rendering process, as in this example:

var boxesOptions = {
	containerPadding: 5,
	boxSpacing: 5,
	targetRowHeight: 200
};

<JustifiedLayout items={boxes} options={boxesOptions}></JustifiedLayout>

Here are listed some of the most used options, for a full reference please see flickr justified layout.

• containerWidth: The width that boxes will be contained within irrelevant of padding.
• containerPadding: Provide a single integer to apply padding to all sides or provide an object to apply individual values to each side.
• boxSpacing: Provide a single integer to apply spacing both horizontally and vertically or provide an object to apply individual values to each axis.
• targetRowHeight: The height of the single row, the algorithm will get as close to the target row height as it can.

Custom template

You can use a custom template for rendering your boxes, to do this you must add one or more children to the component, than it will run with the evaluated items as only argument, it will contain the array that you passed in as props, with an extra style property that hold all the style properties and values.

Using another component as child

Pass as child a react component or simple html element, you can than pass the items variable to your component and than iterate it.

<JustifiedLayout items={this.state.images} options={this.state.options}>

	<!-- custom component to display images -->
	<ImagesList images={items} />

</JustifiedLayout>

Using a function as child

Pass as child a function that will accept images as argument, than you can loop it and render your boxes with your template:

<JustifiedLayout items={this.state.images} options={this.state.options}>
	{
		(items) => items.map(
			(item, index) => {
				return(
					<div className="custom-box" key={index} style={item.style}>
						<img src={item.url}></img>
					</div>
				);
			}
		)
	}
</JustifiedLayout>

---

Development

Clone the project to your computer, than install all dependencies by typing:

npm install

When you are ready you can start the grunt development server by typing:

npm run start

When you finished editing, stop the development server and run the final build:

npm run build

---

Contributing

1. Create an issue and describe your idea
2. Fork the project (https://github.com/codekraft-studio/react-justified-layout/fork)
3. Create your feature branch (git checkout -b my-new-feature)
4. Commit your changes (git commit -am 'Add some feature')
5. Publish the branch (git push origin my-new-feature)
6. Add some test for your new feature
7. Create a new Pull Request