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:

``jsx
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 (

Email


@



);
}
`

Props

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

$3

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:

`jsx
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 (

Email


@



);
}
function Tel() {
const TelStyle = {
width: [100, 160],
horizontalSpace: 5,
responsive: [
{
breakpoint: 480,
settings: {
width: '100%',
wrap: true,
wrapVerticalSpace: 5,
},
},
],
};

return (

Tel


);
}
function Password() {
const PasswordStyle = {
width: [100, 240],
horizontalSpace: 5,
responsive: [
{
breakpoint: 480,
settings: {
width: '100%',
wrap: true,
wrapVerticalSpace: 5,
},
},
],
};

return (

Password


);
}
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 (

Birthday


ー

ー



);
}
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 (

PostalCode


ー



);
}
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 (

CardNumber



ー


ー


ー




);
}
function Main() {
const MainStyle = {
width: '100%',
verticalSpace: 10,
innerWidth: 500,
align: 'center',
};

return (








);
}

class App extends Component {
render() {
return (