Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/osamu38/react-layout-manager
Layout manager not to give margins to components
https://github.com/osamu38/react-layout-manager
layout-manager react styled-components
Last synced: about 9 hours ago
JSON representation
Layout manager not to give margins to components
- Host: GitHub
- URL: https://github.com/osamu38/react-layout-manager
- Owner: osamu38
- Created: 2018-02-19T11:39:49.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-24T17:42:07.000Z (over 6 years ago)
- Last Synced: 2024-10-11T00:34:17.442Z (3 months ago)
- Topics: layout-manager, react, styled-components
- Language: JavaScript
- Size: 712 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-layout-manager
Layout manager not to give margins to components
## Table of Contents
* [Installation](#installation)
* [Usage](#usage)
* [Props](#props)
* [Examples](#examples)
* [Demos](#demos)
## Installation
To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
$ 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
### `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:
```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 (
);
}
}
export default App;
```
## Demos
* https://osamu38.github.io/react-layout-manager/