README.md

About Plock 🌈

Plock is a responsive masonry layout implementation for React. Very simple to use and easy to understand.

Can I see a demo? 👀

The demo is available for you here!

Getting Started 🤩

Install the package with yarn or npm:

$ yarn add react-plock
$ npm install react-plock

The simplest way to use Plock is to import it in your React app:

import { Plock } from "react-plock";

export function Komponent() {
  return (
    <Plock>
      <div>Sun is shining ☀️</div>
      <div>Moon is shining 🌙</div>
      <div>Stars are shining ✨</div>
    </Plock>
  );
}

And that's it! 🎉 🎉 🎉 By default, Plock will use the grid layout with three columns. You can also override this prop by setting the nColumns prop:

import { Plock } from "react-plock";

const Tile = ({ children, style, ...rest }) => (
  <div style={{ width: "100%", ...style }} {...rest}>
    {children}
  </div>
);

export function Komponent() {
  return (
    <Plock nColumns={2}>
      <Tile>I love Plock! 💙</Tile>
      <Tile>I love React! 💛</Tile>
      <Tile>I love Javascript! 💝</Tile>
      <Tile>Give us a Star! 🌟</Tile>
    </Plock>
  );
}

If you need different breakpoints, you can use pass an array like this:

import { Plock } from "react-plock";

export function Komponent() {
  const breakpoints = [
    { size: 640, columns: 1 },
    { size: 768, columns: 2 },
    { size: 1024, columns: 3 },
    { size: 1280, columns: 6 },
  ];

  return (
    <Plock nColumns={breakpoints}>
      <div>Pikachu</div>
      <div>Charmander</div>
      <div>Squirtle</div>
      <div>Bulbasaur</div>
    </Plock>
  );
}

Also the gap between columns can be set by setting the gap prop:

import { Plock } from "react-plock";

export function Komponent() {
  return (
    <Plock nColumns={3} gap={10}>
      <div>Pikachu</div>
      <div>Charmander</div>
      <div>Squirtle</div>
      <div>Bulbasaur</div>
    </Plock>
  );
}

Needs also some extra styling? No problem, you can extend the default styles by setting the style or the className prop:

import { Plock } from "react-plock";

export function Komponent() {
  return (
    <Plock style={{ background: "red" }} className="a-happy-class">
      <div>Pikachu</div>
      <div>Charmander</div>
      <div>Squirtle</div>
      <div>Bulbasaur</div>
    </Plock>
  );
}

Built With 🏗️

• ReactJS

Versioning 🚦

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors 🙋

• Renato Pozzi - itsrennyman

Stargazers 🌟

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details