Skip to content

itsrennyman/react-plock

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Stars Latest Release

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 🏗️

Versioning 🚦

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

Authors 🙋

Stargazers 🌟

Stargazers repo roster for @itsrennyman/react-plock

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