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:

$ 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 Pokemon() {
  return (
    <Plock>
      <div>Bulbasaur</div>
      <div>Ivysaur</div>
      <div>Venusaur</div>
    </Plock>
  );
}

And that's it! 🎉 🎉 🎉

By default, Plock will use this configuration:

const default = [
  { size: 640, columns: 1 },
  { size: 768, columns: 2 },
  { size: 1024, columns: 3 },
  { size: 1280, columns: 6 },
];

You can also override this prop by setting the breakpoints prop:

import { Plock, Breakpoint } from 'react-plock';

// For TS Breakpoint is the type for this property
const breakpoints: Breakpoint[] = [
  { size: 640, columns: 1 },
  { size: 1024, columns: 3 },
];

export function Pokemon() {
  return (
    <Plock breakpoints={breakpoints}>
      <div>Bulbasaur</div>
      <div>Ivysaur</div>
      <div>Venusaur</div>
    </Plock>
  );
}

You can use custom components as elements too:

import { Plock } from 'react-plock';

interface TileProps {
  children: React.ReactNode;
}

const Tile = ({ children }: TileProps) => {
  return (
    <div
      style={{
        height: '350px',
        background: '#ffeb3b',
      }}
    >
      {children}
    </div>
  );
};

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

The element resizing is automatically debounced with a delay of 200ms. You can override this delay by setting the debounce prop with a number in milliseconds.

import { Plock } from 'react-plock';

export function Pokemon() {
  return (
    <Plock debounce={1000}>
      <div>Bulbasaur</div>
      <div>Ivysaur</div>
      <div>Venusaur</div>
    </Plock>
  );
}

Also the gap between columns can be set by setting the gap prop (by default it's 10px):

import { Plock } from 'react-plock';

export function Pokemon() {
  return (
    <Plock gap="1rem">
      <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 Pokemon() {
  return (
    <Plock style={{ background: 'red' }} className="a-happy-class">
      <div>Pikachu</div>
      <div>Charmander</div>
      <div>Squirtle</div>
      <div>Bulbasaur</div>
    </Plock>
  );
}

TypeScript 🤓

Plock is totally type-safe and you can use it with TypeScript too, you can import the types and use them in your code:

import { Breakpoint, PlockProps } from 'react-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