A react masonry library featuring infinite-scrolling capabilities using bricks.js and react-intersection list. It's based off react-masonry-infinite, but uses react-intersection-list instead of react-infinite-scroll for faster infinite scrolling.
Since it's based on bricks.js you will need to set all of your items within the masonry container to be the same width.
Checkout the storybook!
See below details to see how the Yeoman generator
generator-react-exhibit setup this project and which may give you possible tips for contributing
You can use generator-react-exhibit to build your library. Simply run:
yo react-exhibit my-library
To view your library in action run:
cd my-librarynpm start
You can now open http://localhost:9009/ and view your component documentation.
To include a component in the storybook, simply add a
<componentName>.stories.js file in your
component folder, containing the stories you want to show. Have a look at the
Button component for
A set of scripts are provided for you to test, build and analyze the project. Have a look at create react app for more information.
You can run all tests in the project with the following command:
npm run test
You can also generate a website with information on the code coverage with:
npm run test -- --coverage
This will generate a website in the folder
coverage. You can launch it with any server of your
choice, for example serve.
npm i -g serve && serve coverage
You can build a production ready version of your library by running:
npm run build
This will create a build folder containing your library.
You can also build a production ready version of your documentation by running:
npm run build:storybook
This will create a folder called
storybook-static with your documentation.
After building your documentation, you can deploy it as a gh-page.
Make sure to add a homepage entry in your
package.json like so:
Then simply run:
npm run deploy
You can also publish your library to
npm. To do that, simply run:
You can generate a map of all dependencies, this can be very usefull when trying to identify a library causing bloat to the application. After building your application you can generate a map, by running:
npm run analyze
This will look into your
build folder and open an interactive map of the dependencies in your
Typescript support was added to
firstname.lastname@example.org. To activate it, run:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest