/react-igrid

Create a grid with spring-physics based animation

Primary LanguageJavaScript

react-igrid

Mimic the phone app in iphone, create a grid with spring-physics based animation.

For now, it only works on mobile device.

Installation

# npm install react-igrid

or

# yarn add react-igrid

Usage

Example

import React, { useRef } from 'react';
import Grid from 'react-igrid';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

export default () => {
  const containerRef = useRef(null);

  return (
    <div ref={containerRef}>
      <Cube
        title="grid"
        excerpt="some excerpt"
        lockContainerScroll={lockContainerScroll}
        unlockContainerScroll={unlockContainerScroll}
      />
        <div>something in the children</div>
        <div>maybe a components</div>
      </Grid>
    </div>
  );
};

API Reference (WIP)

Props

name default value description
initialWidth calc(100vw / 3) initial width
initialHeight calc(23.33vw - 0.666rem) initial height
initialColor rgba(255, 255, 255, 0.8) initial color
finalHeight calc(100vh - 10%) final height
finalTop 0 final top position
finalLeft 0 final left position
finalRight 0 final right position
finalColor lightblue final color
title test title
excerpt 1234 excerpt
image image
children React components

Events

name default value description
lockContainerScroll () => {} lock the parent container scroll
unlockContainerScroll () => {} unlock the parent container scroll

Contribute

Contributions, issues and feature requests are welcome.

Credits

Inspired by Progressive Web Animations | Alexandra Holachek at React Conf 2019.

Here is the youtube