Movabl

Movabl is a responsive grid layout system for react-redux based architectures. Its layout is completely accessible from redux store. It is based on a breakpoint system with fully configurable row height, column count and width. It does not use CSS or media queries and doesn't require jQuery.

Table of Contents

• Installation
• Getting started
• Decorator usage
• Exposed movabl methods (by decorating a component) accessible from props
• HOF Decorator
• Contribute
• TODO List

Installation

Install the Movabl package using npm:

npm install movabl

Getting started

Create a layout object. Define a layout name, number of columns (collCount), row height (rowHeight) and column width (collWidth). You can define one breakpoint (eg. lg) or multiple breakpoints (lg, md, sm, xs, xxs) for each item, and set the item position (row, col) and size (width, height).

export default {
    name: 'myFirstMovablLayout',
    collCount: 12,
    rowHeight: 50,
    collWidth: 40,
    children: {
        movabl1: {
            name: 'movabl1',
            lg: { row: 0, col: 0, width: 12, height: 1 },
        },
        movabl2: {
            name: 'movabl2',
            xxs: { row: 1, col: 0, width: 3, height: 1 },
            sm: { row: 1, col: 0, width: 6, height: 1 },
            lg: { row: 1, col: 0, width: 12, height: 1 },
        },
        movabl3: {
            name: 'movabl3',
            xxs: { row: 2, col: 8, width: 4, height: 1 },
            xs: { row: 2, col: 6, width: 4, height: 1 },
            sm: { row: 2, col: 4, width: 4, height: 1 },
            md: { row: 2, col: 2, width: 4, height: 1 },
            lg: { row: 2, col: 0, width: 4, height: 1 },
        },
    }
};

Import provider and WHProvider from movabl ( and the layout config if you put it in a separate file) to your component. Add an mvKey attribute for each DOM node which Movabl will controll.

import mvLayout from './mvLayout';
import React from 'react';
import { WHProvider, provider as MovablProvider } from 'movabl';

class MyFirstMovablGrid extends React.Component {

    render() {
        return (
          <WHProvider>
            <MovablProvider config={mvLayout}>
                <div mvKey="movabl1">Movabl one</div>
                <div mvKey="movabl2">Movabl two</div>
                <div mvKey="movabl3">Movabl three</div>
                <div>Div without movabl</div>
            </MovablProvider>
        </WHProvider>
        )
    }
}

Decorator usage

The Movabl decorator exposes 'public' movabl methods; e.g provides numerous functions te determine element position, size, browser size, etc. Most of the exposed functions need a valid mvKey as a first param.

import React from 'react';
import { decorator as movablDecorator } from 'movabl';

@movablDecorator
class DecoratedComponent extends React.Component {
    render() {
        const { getEWidth, getEHeight } = this.props;
        return (
            <div>
                <p>Element width: {getEWidth('decoratedComponent')}</p>
                <p>Element height: {getEHeight('decoratedComponent')}</p>
            </div>
        )
    }
};

export default DecoratedComponent;

import the decorated component like any other component.

import config from './mvLayout';
import DecoratedComponent from './decoratedComponent';
import React from 'react';
import { WHProvider, provider as MovablProvider } from 'movabl';

class App extends React.Component {

    render() {
        const {mvKey} = this.props;
        return (
            <Provider config={config}>
                <DecoratedComponent mvKey = "decoratedComponent"/>
            </Provider>
        );
    }
}

export default App;

HOF decorator

There is an alternative hofDecorator as well where you can pass a callback function where the arguments are prior discussed exposed movabl methods

import React from 'react';
import {hofDecorator as HOFDecorator } from 'movabl';

@HOFDecorator({getElements} => {console.log(getElements()})
class DecoratedComponent extends React.Component {

    render() {
        return (
            <div>
                //...
            </div>
        )
    }
}

export default DecoratedComponent;

Exposed movabl methods (by decorating a component) accessible from props

The Movabl decorator provides the following functions:

    //The functions (except providerWidth and providerHeight) accept two paramenters: mvKey name and a specific breakpoint to call the function at (the second paramenter is optional and it will be set to lg if not provided)

    //Returns the element width
    getGridWidth('decoratedComponent')

    //Returns the element height
    getGridHeight('decoratedComponent')

    //Returns the ??
    getEPos('decoratedComponent')

    //Returns the element left position
    getELeftPos('decoratedComponent')

    //Returns the element right position
    getETopPos('decoratedComponent')

    //Returns the element width
    getEWidth('decoratedComponent')

    //Returns the element height
    getEHeight('decoratedComponent')

    // This element will behave as a footer element sticking to the last element or the bottom of the browser     window
    putElementToBottom('decoratedComponent')

    // Returns the window width
    providerWidth()

    // Returns the window height
    providerHeight()

Known issues

redux @connect needs to be wrapped inside @movablDecorator; e.g:

@movablDecorator
@connect(e => {}, a => {})
export default class x {
}

Sending Feedback

We are always open to your feedback.

TODO List

• Fix putElementToBottom() method
• Draggable grid items
• Resizable grid items
• Define specific grid attributes on children
• ...