-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Cédric Delpoux
committed
Dec 18, 2017
1 parent
854474a
commit e36ca48
Showing
27 changed files
with
6,401 additions
and
707 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,15 @@ | ||
| { | ||
| "parser": "babel-eslint", | ||
| "plugins": ["react"], | ||
| "extends": "airbnb", | ||
| "rules": { | ||
| "arrow-parens": 0, | ||
| "class-methods-use-this": 0, | ||
| "comma-dangle": 0, | ||
| "object-curly-spacing": [2, "never"], | ||
| "quotes": [1, "double", "avoid-escape"], | ||
| "no-return-assign": 0, | ||
| "react/forbid-prop-types": 0, | ||
| "react/jsx-filename-extension": 0, | ||
| "react/no-array-index-key": 0, | ||
| "semi": [2, "never"] | ||
| } | ||
| "env": { | ||
| "amd": true, | ||
| "es6": true, | ||
| "jest/globals": true | ||
| }, | ||
| "plugins": ["jest", "prettier", "react"], | ||
| "extends": [ | ||
| "eslint:recommended", | ||
| "plugin:jest/recommended", | ||
| "plugin:react/recommended", | ||
| "prettier" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,7 @@ | ||
| lib | ||
| dist | ||
| node_modules | ||
| npm-debug.log | ||
| /coverage | ||
| /demo/dist | ||
| /es | ||
| /lib | ||
| /node_modules | ||
| /umd | ||
| npm-debug.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "*.js": [ | ||
| "prettier --no-bracket-spacing --no-semi --trailing-comma=es5 --write", | ||
| "git add" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,14 @@ | ||
| sudo: false | ||
|
|
||
| language: node_js | ||
| node_js: | ||
| - "lts/*" | ||
| node_js: 8 | ||
|
|
||
| before_install: | ||
| - npm install codecov | ||
|
|
||
| after_success: | ||
| - cat ./coverage/lcov.info | ./node_modules/.bin/codecov | ||
|
|
||
| branches: | ||
| only: | ||
| - master |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,53 @@ | ||
| # 2.0.0 - 2017-12-18 | ||
|
|
||
| * Added: ES6 modules build | ||
| * Added: CommonJS build | ||
| * Added: UMD build | ||
| * Added: Demo | ||
| * Added: Tests | ||
| * Added: `style` prop | ||
|
|
||
| # 1.5.0 - 2017-12-12 | ||
|
|
||
| * Fix: SSR | ||
| * Fixed: SSR | ||
|
|
||
| # 1.4.0 - 2017-11-14 | ||
|
|
||
| * Add: img alt for a11y accessibility | ||
| * Update: react v16 as a peer dependency | ||
| * Added: img alt for a11y accessibility | ||
| * Updated: react v16 as a peer dependency | ||
|
|
||
| # 1.3.3 - 2017-09-28 | ||
|
|
||
| * Add: custom className support | ||
| * Add: single node children support | ||
| * Fix: do not reset this.container | ||
| * Added: custom className support | ||
| * Added: single node children support | ||
| * Fixed: do not reset this.container | ||
|
|
||
| # 1.2.3 - 2017-06-14 | ||
|
|
||
| * Update: handle default columns count | ||
| * Updated: handle default columns count | ||
|
|
||
| # 1.2.2 - 2017-06-03 | ||
|
|
||
| * Add: `files` to package.json | ||
| * Added: `files` to package.json | ||
|
|
||
| # 1.2.1 - 2017-06-03 | ||
|
|
||
| * Update: Use `npm` to publish package | ||
| * Updated: Use `npm` to publish package | ||
|
|
||
| # 1.2.0 - 2017-04-14 | ||
|
|
||
| * Update `react` version to `15.5` | ||
| * Add `prop-types` package in `peerDependencies` | ||
| * Remove `browser` field in `package.json` | ||
| * Remove `dist` task in `package.json` | ||
| * Remove `watch` task in `package.json` | ||
| * Remove `webpack` dev dependency | ||
| * Updated: `react` version to `15.5` | ||
| * Added: `prop-types` package in `peerDependencies` | ||
| * Removed: `browser` field in `package.json` | ||
| * Removed: `dist` task in `package.json` | ||
| * Removed: `watch` task in `package.json` | ||
| * Removed: `webpack` dev dependency | ||
|
|
||
| # 1.1.0 - 2017-04-13 | ||
|
|
||
| * Add: `gutter` prop on `Mansory` component | ||
| * Added: `gutter` prop on `Mansory` component | ||
|
|
||
| # 1.0.0 - 2017-04-05 | ||
|
|
||
| * Add: `Masonry` component | ||
| * Add: `ResponsiveMasonry` component | ||
| * Added: `Masonry` component | ||
| * Added: `ResponsiveMasonry` component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| # Contributing | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| [Node.js](http://nodejs.org/) >= v4 must be installed. | ||
|
|
||
| ## Installation | ||
|
|
||
| * Running `yarn` or `npm install` in the components's root directory will install everything you need for development. | ||
|
|
||
| ## Demo Development Server | ||
|
|
||
| * `npm run demo:start` will run a development server with the component's demo app at [http://localhost:1190](http://localhost:1190) with hot module reloading. | ||
|
|
||
| ## Linting | ||
|
|
||
| * `npm run lint` will lint the `src` and `demo/src` folders | ||
|
|
||
| ## Running Tests | ||
|
|
||
| * `npm test` will run the tests once and produce a coverage report in `coverage/`. | ||
|
|
||
| * `npm run test:watch` will run the tests on every change. | ||
|
|
||
| ## Building | ||
|
|
||
| * `npm run build` will build the component for publishing to npm and also bundle the demo app. | ||
|
|
||
| * `npm run clean` will delete built resources. | ||
|
|
||
| > **Builds:** | ||
| > | ||
| > * CommonJS build => `/lib`, | ||
| > * ES6 modules build => `/es` | ||
| > * UMD build => `/umd` | ||
| > * Demo build => `/demo/dist` |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,115 @@ | ||
| # react-responsive-masonry    | ||
| # react-responsive-masonry | ||
|
|
||
| React responsive masonry component built with css flexbox with no dependencies | ||
| [![npm package][npm-badge]][npm] [![Travis][build-badge]][build] | ||
| [![Codecov][codecov-badge]][codecov] ![Module formats][module-formats] | ||
|
|
||
| ## Install | ||
| A lightweight responsive React pie chart component using only SVG | ||
|
|
||
| ```sh | ||
| npm install --save react-responsive-masonry | ||
| ## Getting started | ||
|
|
||
| [](https://nodei.co/npm/react-responsive-masonry/) | ||
|
|
||
| You can download `react-responsive-masonry` from the NPM registry via the `npm` or | ||
| `yarn` commands | ||
|
|
||
| ```shell | ||
| yarn add react-responsive-masonry | ||
| npm install react-responsive-masonry --save | ||
| ``` | ||
|
|
||
| If you don't use package manager and you want to include `react-responsive-masonry` | ||
| directly in your html, you could get it from the UNPKG CDN | ||
|
|
||
| ```html | ||
| https://unpkg.com/react-responsive-masonry/umd/react-responsive-masonry.js | ||
| ``` | ||
|
|
||
| ## Example | ||
|
|
||
|  | ||
|  | ||
|
|
||
| ## Usage | ||
|
|
||
| If you want the number of columns change by resizing the window, you need to wrap the `Masonry` component by the `ResponsiveMasonry` component. | ||
| Otherwise, you only need to use the `Masonry` component. | ||
|
|
||
| ```js | ||
| import React, {Component} from "react" | ||
| import React from "react" | ||
| import Masonry, {ResponsiveMasonry} from "react-responsive-masonry" | ||
|
|
||
| const images = [ | ||
| "https://unsplash.it/200/300?image=1050", | ||
| "https://unsplash.it/400/400?image=1039", | ||
| "https://unsplash.it/400/300?image=1017", | ||
| "https://unsplash.it/200/200?image=997", | ||
| "https://unsplash.it/500/400?image=287", | ||
| "https://unsplash.it/400/500?image=955", | ||
| "https://unsplash.it/200/300?image=916", | ||
| "https://unsplash.it/300/300?image=110", | ||
| "https://unsplash.it/300/300?image=206", | ||
| ] | ||
|
|
||
| // The number of columns change by resizing the window | ||
| class MyWrapper extends Component { | ||
| render() { | ||
| return ( | ||
| <ResponsiveMasonry columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}> | ||
| <Masonry> | ||
| {images.map((image, i) => | ||
| <img key={i} src={image} style={{width: "100%", display: "block"}} alt="" /> | ||
| )} | ||
| </Masonry> | ||
| </ResponsiveMasonry> | ||
| ) | ||
| } | ||
| class MyWrapper extends React.Component { | ||
| render() { | ||
| return ( | ||
| <ResponsiveMasonry | ||
| columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}} | ||
| > | ||
| <Masonry> | ||
| <ChildA /> | ||
| <ChildB /> | ||
| {/* Children */} | ||
| <ChildY /> | ||
| <ChildZ /> | ||
| </Masonry> | ||
| </ResponsiveMasonry> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| // The number of columns don't change by resizing the window | ||
| class MyWrapper extends Component { | ||
| render() { | ||
| return ( | ||
| <Masonry columnsCount={3}> | ||
| {images.map((image, i) => | ||
| <img key={i} src={image} style={{width: "100%", display: "block"}} /> | ||
| )} | ||
| </Masonry> | ||
| ) | ||
| } | ||
| render() { | ||
| return ( | ||
| <Masonry columnsCount={3}> | ||
| <ChildA /> | ||
| <ChildB /> | ||
| {/* Children */} | ||
| <ChildY /> | ||
| <ChildZ /> | ||
| </Masonry> | ||
| ) | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| ### Mansonry component | ||
| * `columnsCount`: Number - injected by ResponsiveMasonry - default 3, | ||
| * `gutter`: String - margin surrounding each item - default "0" - eg: "10px", | ||
|
|
||
| ### ResponsiveMasonry component | ||
| * `columnsCountBreakPoints`: Object, keys are breakpoints in px, values are the columns number - default {350: 1, 750: 2, 900: 3}, | ||
|
|
||
| ## Development | ||
|
|
||
| ### Clean `lib` | ||
| | Name | PropType | Description | Default | | ||
| | ------------ | -------- | ----------------------------- | ------- | | ||
| | columnsCount | Number | Injected by ResponsiveMasonry | 3 | | ||
| | gutter | String | Margin surrounding each item | "0" | | ||
|
|
||
| ```js | ||
| npm run clean | ||
| ``` | ||
|
|
||
| ### Build `lib` folder | ||
|
|
||
| ```js | ||
| npm run build | ||
| ``` | ||
| ### ResponsiveMasonry component | ||
|
|
||
| ### Watch `src` folder | ||
| | Name | PropType | Description | Default | | ||
| | ----------------------- | -------- | --------------------------------------------------------- | ------------------------ | | ||
| | columnsCountBreakPoints | Object | Keys are breakpoints in px, values are the columns number | {350: 1, 750: 2, 900: 3} | | ||
|
|
||
| ```js | ||
| npm run watch | ||
| ``` | ||
| ## Contributing | ||
|
|
||
| ### Lint `src` folder | ||
| * ⇄ Pull/Merge requests and ★ Stars are always welcome. | ||
| * For bugs and feature requests, please [create an issue][github-issue]. | ||
| * Pull requests must be accompanied by passing automated tests (`npm test`). | ||
|
|
||
| ```js | ||
| npm run lint | ||
| ``` | ||
| See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines | ||
|
|
||
| ## Changelog | ||
|
|
||
| See [changelog](./CHANGELOG.md) | ||
|
|
||
| ## License | ||
|
|
||
| See [MIT](./LICENCE) | ||
| This project is licensed under the MIT License - see the | ||
| [LICENCE.md](./LICENCE.md) file for details | ||
|
|
||
| [npm-badge]: https://img.shields.io/npm/v/react-responsive-masonry.svg?style=flat-square | ||
| [npm]: https://www.npmjs.org/package/react-responsive-masonry | ||
| [build-badge]: https://img.shields.io/travis/xuopled/react-responsive-masonry/master.svg?style=flat-square | ||
| [build]: https://travis-ci.org/xuopled/react-responsive-masonry | ||
| [codecov-badge]: https://img.shields.io/codecov/c/github/xuopled/react-responsive-masonry.svg?style=flat-square | ||
| [codecov]: https://codecov.io/gh/xuopled/react-responsive-masonry | ||
| [module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square | ||
| [github-page]: https://xuopled.github.io/react-responsive-masonry | ||
| [github-issue]: https://github.com/xuopled/react-responsive-masonry/issues/new |
Oops, something went wrong.