@c8s/masonry

@c8s/masonry

Usage

/**
 * As to prepare of using the `Masonry`
 * 
 * ```sh
 * yarn add @c8s/masonry react @types/react
 * ```
 */
import Masonry from '@c8s/masonry';

Example

const createItem = (_: any, i: number) => {
  const col = i % 5 === 1 ? 2 : 1;
  return {
    col,
    style: {
      background: randomcolor({
        luminosity: 'dark',
      }),
    },
  };
};

const items = [...Array(10)].map(createItem);

() => (
  <Masonry col={3} gutter={10}>
    {({Item}) => {
      return (
        <>
          {items.map((style, i) => {
            return (
              <Item
                key={i}
                assets={[
                  {
                    href: `https://dummyimage.com/500x500`,
                    as: 'image',
                  },
                ]}
                index={i}
                col={style.col}
              >
                <div style={{display: 'block'}}>
                  <img
                    src="https://dummyimage.com/500x500"
                    style={{
                      maxWidth: '100%',
                      display: 'block',
                    }}
                  />
                  <div
                    style={{
                      ...style.style,
                      maxWidth: '100%',
                      color: '#000',
                    }}
                  >
                    Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis
                    nostrud exercitation ullamco laboris nisi ut aliquip
                    ex ea commodo consequat. Duis aute irure dolor in
                    reprehenderit in voluptate velit esse cillum dolore eu
                    fugiat nulla pariatur. Excepteur sint occaecat
                    cupidatat non proident, sunt in culpa qui officia
                    deserunt mollit anim id est laborum.
                  </div>
                </div>
              </Item>
            );
          })}
        </>
      );
    }}
  </Masonry>
);

Contributors

Thanks goes to these wonderful people (emoji key):

純 📖	Aki-Japan 📖

This project follows the all-contributors specification. Contributions of any kind welcome!