Layout manager not to give margins to components
npm install react-layout-managerLayout manager not to give margins to components
* Installation
* Usage
* Props
* Examples
* Demos
To install, you can use npm or yarn:
$ npm install -S react-layout-manager
$ yarn add react-layout-manager
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 (
);
}
`
Props|Type|Default Value|Description
---|---|---|---
horizontalSpace|string \| number \| Array|0|Horizontal space of element and elementverticalSpace|string \| number \| Array|0|Vertical space of element and elementwrapVerticalSpace|string \| number \| Array|0|Vertical space of element and element when wrapwidth|string \| number \| Array|null|Width of elements innerWidth|string \| number \| Array|null|Width in elementverticalAlign|string \| number \| Array|null|Vertical alignalign|'left' \| 'center' \| 'right' \| Array<'left' \| 'center' \| 'right'>|null|Align inner elementvisible|boolean \| Array|true|Whether the elements are displayed or notwrap|boolean|false|Whether to wrap or not
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.[ { breakpoint: 1024, settings: { wrap: true, width: ['20%', 100, '80%'] } }, { breakpoint: 768, settings: { visible: false } }]
Example:
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 (
);
}
function Tel() {
const TelStyle = {
width: [100, 160],
horizontalSpace: 5,
responsive: [
{
breakpoint: 480,
settings: {
width: '100%',
wrap: true,
wrapVerticalSpace: 5,
},
},
],
};
return (
);
}
function Password() {
const PasswordStyle = {
width: [100, 240],
horizontalSpace: 5,
responsive: [
{
breakpoint: 480,
settings: {
width: '100%',
wrap: true,
wrapVerticalSpace: 5,
},
},
],
};
return (
);
}
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 (
);
}
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 (
);
}
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 (
);
}
function Main() {
const MainStyle = {
width: '100%',
verticalSpace: 10,
innerWidth: 500,
align: 'center',
};
return (
);
}
class App extends Component {
render() {
return (
);
}
}
export default App;
``
* https://osamu38.github.io/react-layout-manager/