react-layout-manager

Layout manager not to give margins to components

Table of Contents

• Installation
• Usage
• Props
• Examples
• Demos

Installation

To install, you can use npm or yarn:

$ npm install -S react-layout-manager
$ yarn add react-layout-manager

Usage

Example:

import RLM from 'react-layout-manager';

function Email() {
  const EmailStyle = {
    width: [100, '100%'],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          wrap: true,
          wrapVerticalSpace: 5,
        },
      },
    ],
  };
  const EmailInnerStyle = {
    width: ['65%', 16, '35%'],
    horizontalSpace: 5,
  };

  return (
    <RLM {...EmailStyle}>
      <Label>Email</Label>
      <RLM {...EmailInnerStyle}>
        <Input placeholder="react-layout-manager" />
        <Unit>@</Unit>
        <Input placeholder="gmail.com" />
      </RLM>
    </RLM>
  );
}

Props

Props	Type	Default Value	Description
horizontalSpace	string | number | Array<string | number>	0	Horizontal space of element and element
verticalSpace	string | number | Array<string | number>	0	Vertical space of element and element
wrapVerticalSpace	string | number | Array<string | number>	0	Vertical space of element and element when wrap
width	string | number | Array<string | number>	null	Width of elements
innerWidth	string | number | Array<string | number>	null	Width in element
verticalAlign	string | number | Array<string | number>	null	Vertical align
align	'left' | 'center' | 'right' | Array<'left' | 'center' | 'right'>	null	Align inner element
visible	boolean | Array<boolean>	true	Whether the elements are displayed or not
wrap	boolean	false	Whether to wrap or not

responsive property

Array of objects in the form of { breakpoint: int, settings: { ... } } The breakpoint number is the maxWidth so the settings will be applied when resolution is below this value. Example: [ { breakpoint: 1024, settings: { wrap: true, width: ['20%', 100, '80%'] } }, { breakpoint: 768, settings: { visible: false } }]

Examples

Demo Source:

import React, { Component } from 'react';
import styled from 'styled-components';
import RLM from 'react-layout-manager';

const Input = styled.input`
  ...
`;
const Unit = styled.div`
  ...
`;
const Label = styled.div`
  ...
`;

function Email() {
  const EmailStyle = {
    width: [100, '100%'],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          wrap: true,
          wrapVerticalSpace: 5,
        },
      },
    ],
  };
  const EmailInnerStyle = {
    width: ['65%', 16, '35%'],
    horizontalSpace: 5,
  };

  return (
    <RLM {...EmailStyle}>
      <Label>Email</Label>
      <RLM {...EmailInnerStyle}>
        <Input placeholder="react-layout-manager" />
        <Unit>@</Unit>
        <Input placeholder="gmail.com" />
      </RLM>
    </RLM>
  );
}
function Tel() {
  const TelStyle = {
    width: [100, 160],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          width: '100%',
          wrap: true,
          wrapVerticalSpace: 5,
        },
      },
    ],
  };

  return (
    <RLM {...TelStyle}>
      <Label>Tel</Label>
      <Input placeholder="090XXXXXXXX" />
    </RLM>
  );
}
function Password() {
  const PasswordStyle = {
    width: [100, 240],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          width: '100%',
          wrap: true,
          wrapVerticalSpace: 5,
        },
      },
    ],
  };

  return (
    <RLM {...PasswordStyle}>
      <Label>Password</Label>
      <Input placeholder="rEaCtLaYoUtMaNaGeR"/>
    </RLM>
  );
}
function Birthday() {
  const BirthdayStyle = {
    width: [100, '100%'],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          wrap: true,
          wrapVerticalSpace: 5,
        },
      },
    ],
  };
  const BirthdayInnerStyle = {
    width: [56, 16, 44, 16, 44],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          width: ['40%', 16, '30%', 16, '30%'],
        },
      },
    ],
  };

  return (
    <RLM {...BirthdayStyle}>
      <Label>Birthday</Label>
      <RLM {...BirthdayInnerStyle}>
        <Input placeholder="YYYY" />
        <Unit>ー</Unit>
        <Input placeholder="MM" />
        <Unit>ー</Unit>
        <Input placeholder="DD" />
      </RLM>
    </RLM>
  );
}
function PostalCode() {
  const PostalCodeStyle = {
    width: [100, '100%'],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          wrap: true,
          wrapVerticalSpace: 5,
        },
      },
    ],
  };
  const PostalCodeInnerStyle = {
    width: [64, 16, 80],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          width: ['50%', 16, '50%']
        },
      },
    ],
  };

  return (
    <RLM {...PostalCodeStyle}>
      <Label>PostalCode</Label>
      <RLM {...PostalCodeInnerStyle}>
        <Input placeholder="XXX" />
        <Unit>ー</Unit>
        <Input placeholder="XXXX" />
      </RLM>
    </RLM>
  );
}
function CardNumber() {
  const CardNumberStyle = {
    width: [100, '100%'],
    horizontalSpace: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          wrap: true,
          wrapVerticalSpace: 5,
        },
      },
    ],
  };
  const CardNumberInnerStyle = {
    width: ['50%', 16, '50%'],
    horizontalSpace: 5,
    wrapVerticalSpace: 10,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          width: ['100%', null, '100%'],
          wrap: true,
          visible: [true, false, true],
        },
      },
    ],
  };
  const CardNumberCellStyle = {
    width: ['50%', 16, '50%'],
    horizontalSpace: 5,
  };

  return (
    <RLM {...CardNumberStyle}>
      <Label>CardNumber</Label>
      <RLM {...CardNumberInnerStyle}>
        <RLM {...CardNumberCellStyle}>
          <Input placeholder="XXXX" />
          <Unit>ー</Unit>
          <Input placeholder="XXXX" />
        </RLM>
        <Unit>ー</Unit>
        <RLM {...CardNumberCellStyle}>
          <Input placeholder="XXXX" />
          <Unit>ー</Unit>
          <Input placeholder="XXXX" />
        </RLM>
      </RLM>
    </RLM>
  );
}
function Main() {
  const MainStyle = {
    width: '100%',
    verticalSpace: 10,
    innerWidth: 500,
    align: 'center',
  };

  return (
    <RLM {...MainStyle}>
      <Email />
      <Tel />
      <Password />
      <Birthday />
      <PostalCode />
      <CardNumber />
    </RLM>
  );
}

class App extends Component {
  render() {
    return (
      <Main />
    );
  }
}

export default App;

Demos

• https://osamu38.github.io/react-layout-manager/