{"id":20467024,"url":"https://github.com/codekraft-studio/react-justified-layout","last_synced_at":"2025-04-13T09:11:02.493Z","repository":{"id":57103048,"uuid":"98216545","full_name":"codekraft-studio/react-justified-layout","owner":"codekraft-studio","description":"reactjs wrapper for flickr justified-layout module","archived":false,"fork":false,"pushed_at":"2018-01-15T12:58:13.000Z","size":342,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T00:54:13.931Z","etag":null,"topics":["justified-layout","react-component","reactjs"],"latest_commit_sha":null,"homepage":"https://codekraft-studio.github.io/react-justified-layout/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codekraft-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-24T17:26:36.000Z","updated_at":"2021-07-24T19:36:41.000Z","dependencies_parsed_at":"2022-08-20T20:40:25.152Z","dependency_job_id":null,"html_url":"https://github.com/codekraft-studio/react-justified-layout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Freact-justified-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Freact-justified-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Freact-justified-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Freact-justified-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codekraft-studio","download_url":"https://codeload.github.com/codekraft-studio/react-justified-layout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688565,"owners_count":21145766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["justified-layout","react-component","reactjs"],"created_at":"2024-11-15T13:26:48.556Z","updated_at":"2025-04-13T09:11:02.453Z","avatar_url":"https://github.com/codekraft-studio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-justified-layout\n\u003e reactjs wrapper for flickr justified-layout module\n\n### [DEMO](https://codekraft-studio.github.io/react-justified-layout/)\n\n## Getting started\nInstall the module and save it to your project dependencies:\n```bash\nnpm install @codekraft-studio/react-justified-layout\n```\nImport the module in your application:\n```js\nimport JustifiedLayout from '@codekraft-studio/react-justified-layout';\n```\nNow you are ready to use the __JustifiedLayout__ component in your app.\n\n---\n\n## How does it work?\nThe component will accept only two props:\n* __items__: An array of items to evaluate.\n* __options__: An object with the options for justified-layout script.\n\nWith this in mind you can start using the component in multiple ways.\n\n### Basic usage\nYou can use the component with an array of elements and no options, in this example is used an array of rateo values:\n```html\n\u003cJustifiedLayout items={[0.8, 0.5, 1.8, 1]}\u003e\u003c/JustifiedLayout\u003e\n```\nIf you want to use an array of objects, every object __MUST__ have a __width__ and __height__ properties, like in the example below:\n```javascript\nvar boxes = [\n\t{ width: 450, height: 350 },\n\t{ width: 680, height: 420 },\n\t{ width: 980, height: 640 }\n];\n```\n```html\n\u003cJustifiedLayout items={boxes}\u003e\u003c/JustifiedLayout\u003e\n```\n\n### Custom options\nAs per the flickr justified layout module, you can pass various options to customize the rendering process, as in this example:\n```javascript\nvar boxesOptions = {\n\tcontainerPadding: 5,\n\tboxSpacing: 5,\n\ttargetRowHeight: 200\n};\n```\n```html\n\u003cJustifiedLayout items={boxes} options={boxesOptions}\u003e\u003c/JustifiedLayout\u003e\n```\n\nHere are listed some of the most used options, for a full reference please see [flickr justified layout](http://flickr.github.io/justified-layout/).\n\n* __containerWidth__: The width that boxes will be contained within irrelevant of padding.\n* __containerPadding__: Provide a single integer to apply padding to all sides or provide an object to apply individual values to each side.\n* __boxSpacing__: Provide a single integer to apply spacing both horizontally and vertically or provide an object to apply individual values to each axis.\n* __targetRowHeight__: The height of the single row, the algorithm will get as close to the target row height as it can.\n\n### Custom template\nYou 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.\n\n#### Using another component as child\nPass as child a react component or simple html element, you can than pass the items variable to your component and than iterate it.\n```html\n\u003cJustifiedLayout items={this.state.images} options={this.state.options}\u003e\n\n\t\u003c!-- custom component to display images --\u003e\n\t\u003cImagesList images={items} /\u003e\n\n\u003c/JustifiedLayout\u003e\n```\n\n#### Using a function as child\nPass as child a function that will accept __images__ as argument, than you can loop it and render your boxes with your template:\n```html\n\u003cJustifiedLayout items={this.state.images} options={this.state.options}\u003e\n\t{\n\t\t(items) =\u003e items.map(\n\t\t\t(item, index) =\u003e {\n\t\t\t\treturn(\n\t\t\t\t\t\u003cdiv className=\"custom-box\" key={index} style={item.style}\u003e\n\t\t\t\t\t\t\u003cimg src={item.url}\u003e\u003c/img\u003e\n\t\t\t\t\t\u003c/div\u003e\n\t\t\t\t);\n\t\t\t}\n\t\t)\n\t}\n\u003c/JustifiedLayout\u003e\n```\n\n---\n\n## Development\nClone the project to your computer, than install all dependencies by typing:\n```bash\nnpm install\n```\nWhen you are ready you can start the grunt development server by typing:\n```bash\nnpm run start\n```\nWhen you finished editing, stop the development server and run the final build:\n```bash\nnpm run build\n```\n\n---\n\n## Contributing\n\n1. Create an issue and describe your idea\n2. Fork the project (https://github.com/codekraft-studio/react-justified-layout/fork)\n3. Create your feature branch (`git checkout -b my-new-feature`)\n4. Commit your changes (`git commit -am 'Add some feature'`)\n5. Publish the branch (`git push origin my-new-feature`)\n6. Add some test for your new feature\n7. Create a new Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Freact-justified-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodekraft-studio%2Freact-justified-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Freact-justified-layout/lists"}