Newly Paranoid Maintainers

    react-isometric-grid

    0.0.3 • Public • Published

    react-isometric-grids Build Status npm version

    React Isometric Grids 😛 Inspired by https://github.com/codrops/IsometricGrids

    NPM

    Demo

    Example

    Notes

    use with normalize.css for best results across browsers.

    npm i -S normalize.css
     
    # and in index.js add 
     
    import 'normalize.css';

    Usage

    import React, { Component } from 'react';
    import IsometricGrid, { Cell } from 'react-isometric-grid';
    import dynamics from 'dynamics.js';
     
    class App extends Component {
      render() {
        function getRandomInt(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
     
        return (
          <IsometricGrid
            shadow
            transform="rotateX(45deg) rotateZ(45deg)"
            stackItemsAnimation={{
              properties: function(pos) {
                return {
                  translateZ: (pos + 1) * 30,
                  rotateZ: getRandomInt(-4, 4),
                };
              },
              options: function(pos, itemstotal) {
                return {
                  type: dynamics.bezier,
                  duration: 500,
                  points: [
                    { x: 0, y: 0, cp: [{ x: 0.2, y: 1 }] },
                    { x: 1, y: 1, cp: [{ x: 0.3, y: 1 }] },
                  ],
                  delay: (itemstotal - pos - 1) * 40,
                };
              },
            }}
            style={{ height: '800px', width: '900px' }}
          >
            <Cell
              layers={[
                'https://picsum.photos/600/600/?random',
                '#9972fc',
                '#c322a3',
                '#9eb5c2',
              ]}
            />
            <Cell
              layers={[
                'https://picsum.photos/200/300/?random',
                '#9972fc',
                '#c322a3',
                '#9eb5c2',
              ]}
            />
            <Cell
              layers={[
                'https://picsum.photos/400/300/?random',
                '#9972fc',
                '#c322a3',
                '#9eb5c2',
              ]}
            />
            <Cell
              layers={[
                'https://picsum.photos/200/500/?random',
                '#9972fc',
                '#c322a3',
                '#9eb5c2',
              ]}
            />
          </ReactIsometricGrid>
        );
      }
    }
     
    export default App;

    Options

    Isometric Grid

    Prop Type Description Default
    children (required) React elements Cells inside the grid
    perspective number px from the z axis 3000
    transform string css transform applied to the whole grid "scale3d(0.8,0.8,1) rotateY(45deg) rotateZ(-10deg)"
    stackItemsAnimation object animation properties for each cell using dynamic.js below
    shadow boolean Display a shadow under the cells false
    onGridLoaded function Callback when the grid is loaded ()=>{}
    style object inline css styling for the inner div { height: '600px', width: '600px', position: 'absolute', left: 0, top: 0 }

    stackItemsAnimation prop example

    dynamic.js animations parameters

    {
      // object of the properties/values you want to animate
      // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
      properties(pos) {
        return {
          rotateX: (pos + 1) * -15,
        };
      },
      // object representing the animation like duration and easing
      // https://github.com/michaelvillar/dynamics.js#dynamicsanimateel-properties-options
      options(pos, totalItems) {
        return {
          type: dynamics.spring,
          delay: (totalItems - pos - 1) * 30,
        };
    }

    Cell

    Prop Type Description Default
    layers (required) array of string what each layer is in the cell.
    Can be image urls or valid css colors
    href string url that the image will link to when clicked null
    onClick function what is executed when the image is clicked. If using with href, be sure to preventDefault() null
    title string title that is under the layers. Shown on mouse over null
    style object inline styling for the Cell component { width: '200px', height: '200px', transformStyle: 'preserve-3d' }
    layerStyle object inline styling for each inner layer { width: '200px', height: '200px' }

    Troubleshooting

    z-animations aren't working Make sure you dont have overflow css property set. That messes up z-axis animations. https://stackoverflow.com/questions/21248111/overflow-behavior-after-using-css3-transform

    2d animations are acting weird in the style prop of cell. set transformStyle: flat SEE #9 https://www.w3schools.com/cssref/css3_pr_transform-style.asp

    The axis of rotation is weird or not what you want set the transformOrigin property of layerStyle prop of Cell. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

    Contributing

    After cloning the repository and running npm install inside, you can use the following commands to develop and build the project.

    # Starts a webpack dev server that hosts a demo page with the component. 
    # It uses react-hot-loader so changes are reflected on save. 
    npm start
     
    # Start the storybook, which has several different examples to play with. 
    # Also hot-reloaded. 
    npm run storybook
     
    # Runs the library tests 
    npm test
     
    # Lints the code with eslint 
    npm run lint
     
    # Lints and builds the code, placing the result in the dist directory. 
    # This build is necessary to reflect changes if youre 
    #  `npm link`-ed to this repository from another local project. 
    npm run build

    Pull requests are welcome!

    License

    MIT

    Credits

    Install

    npm i react-isometric-grid

    DownloadsWeekly Downloads

    2

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • wuxx1045