https://github.com/codekraft-studio/react-justified-layout
reactjs wrapper for flickr justified-layout module
https://github.com/codekraft-studio/react-justified-layout
justified-layout react-component reactjs
Last synced: about 1 month ago
JSON representation
reactjs wrapper for flickr justified-layout module
- Host: GitHub
- URL: https://github.com/codekraft-studio/react-justified-layout
- Owner: codekraft-studio
- License: mit
- Created: 2017-07-24T17:26:36.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-15T12:58:13.000Z (over 7 years ago)
- Last Synced: 2025-03-27T00:54:13.931Z (about 2 months ago)
- Topics: justified-layout, react-component, reactjs
- Language: JavaScript
- Homepage: https://codekraft-studio.github.io/react-justified-layout/
- Size: 334 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-justified-layout
> reactjs wrapper for flickr justified-layout module
### [DEMO](https://codekraft-studio.github.io/react-justified-layout/)
## Getting started
Install the module and save it to your project dependencies:
```bash
npm install @codekraft-studio/react-justified-layout
```
Import the module in your application:
```js
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:
```html
```
If you want to use an array of objects, every object __MUST__ have a __width__ and __height__ properties, like in the example below:
```javascript
var boxes = [
{ width: 450, height: 350 },
{ width: 680, height: 420 },
{ width: 980, height: 640 }
];
```
```html
```
### Custom options
As per the flickr justified layout module, you can pass various options to customize the rendering process, as in this example:
```javascript
var boxesOptions = {
containerPadding: 5,
boxSpacing: 5,
targetRowHeight: 200
};
```
```html
```
Here are listed some of the most used options, for a full reference please see [flickr justified layout](http://flickr.github.io/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.
```html
```
#### 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:
```html
{
(items) => items.map(
(item, index) => {
return(
);
}
)
}
```
---
## Development
Clone the project to your computer, than install all dependencies by typing:
```bash
npm install
```
When you are ready you can start the grunt development server by typing:
```bash
npm run start
```
When you finished editing, stop the development server and run the final build:
```bash
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