Is a component that give us the use of the library Layouter.js in React JS.
npm install layouter.js react-layouter
// o
yarn add layouter.js react-layouter
- First we have to init the library, with the
<Provider>
, there if where we can declare the configuration:
import { Provider } from 'react-layouter';
import App from './App';
const layouterConfig = {
// Here we can add the configuration of the library
// I mean: los breakpoints, the prefix, etc
};
<Provider config={layouterConfig}>
<App />
</Provider>;
Is require to be in root, so that I feed the whole application.
- Second and finally, you have to use the component
<Box>
where you want, in other component for example:
import { Box } from 'react-layouter';
const App = () => {
return (
<Box w="100" h={100} c="13/15" as="main">
content
</Box>
);
};
export default App;
That's it!, that is all of we have to do to use the layouter in React. Just use the component Box
wherever you want.
Are practically the same of the library, just the names was changed from kebab-case
to camelCase
, let see:
Name | Alias | Examples | Description |
---|---|---|---|
as | as |
as="span" , as="p" |
Define the html tag that will be rendered |
Cols | c |
cols="13/15" , c="5/10" |
Determines the columns, that is, the 'width' as a percentage. |
d | display |
d="bl" , display="inline" |
Determines the display that the node will have. |
Mart | mt , margin-top |
mart="10" , mt="20" , margin-top="12" |
Determines the top margin of a node. |
Marr | mr , margin-right |
marr="2/15" , mr="5/10" , margin-right="3/5" |
Determine the right margin of a node. |
Marb | mb , margin-bottom |
marb="30" , mb="50" , margin-bottom="25" |
Determine the bottom margin of a node. |
Marl | ml , margin-left |
marl="3/15" , ml="5/10" , margin-left="3/5" |
Determine the left margin of a node. |
Mar | m , margin |
mar="20-2/15-30-3/15" , m="20-2/15-30-3/15" , margin="20-2/15-30-3/15" |
It is a shorthand of the directives: mart, marr, marb, y marl. |
Mary | my , margin-y |
mary="10" , my="20" , margin-y="30" |
Determine the top and bottom margin of a node. |
Marx | mx , maring-x |
marx="10" , mx="20" , margin-x="30" |
Determine the right and left margin at the same time of a node. |
Padt | pt , padding-top |
padt="10" , pt="20" , padding-top="30" |
Determine the top padding of a node. |
Padr | pr , padding-right |
padr="2/15" , pr="3/16" , padding-right="4/17" |
Determine the padding right of a node. |
Padb | pb , padding-bottom |
padb="30" , pb="40" , padding-bottom="50" |
Determine the bottom padding of a node. |
Padl | pl , padding-left |
padl="3/15" , pl="4/16" , padding-left="5/17" |
Determine the left padding of a node. |
Pad | p , padding |
pad="20-2/15-30-3/15" , p="20-2/15-30-3/15" , padding="20-2/15-30-3/15" |
It is a shorthand of the directives: padt, padr, padb, y padl. |
Pady | py , padding-y |
pady="10" , py="20" , padding-y="30" |
Determine the padding top and bottom than the same time of a node. |
Padx | px , padding-x |
padx="10" , px="20" , padding-x="30 |
Determine the right and left padding at the same time of a node. |
Flex | fx |
flex="jc:ce ai:fs fd:co" , flex="jc:fe ai:fs , fx="align-items:center flex-wrap:wrap" |
Determine the display Flex of the node and its derivatives. |
Wdh | w , width |
wdh="100" , w="200" , width="300" |
Determine the width of the node in pixels or other unit of measure. |
Hgt | h , height |
hgt="100" , h="200" , height="300" |
Determine the height of the node in pixels or other unit of measure. |
Mxw | max-width |
mxw="200" , max-width="300" |
Determine the maximum width of the node in pixels or other unit of measure. |
Mxh | max-height |
mxh="200" , max-height="300" |
Determine the maximum height of the node in pixels or other unit of measure. |
Miw | min-width |
miw="300" , min-width="400" |
Determine the minimum width of the node in pixels or other unit of measure. |
Mih | min-height |
mih="300" , min-height="400" |
Determine the high height of the node in pixels or other unit of measure. |
Pos | position |
pos="re" , position="relative" |
Determine the position of node. |
T | top |
t="10" , top="20" |
Determine the top of the node in pixels or other unit of measure. |
R | right |
r="10" , right="20" |
Determine the right of the node in pixels or other unit of measure. |
B | bottom |
b="10" , bottom="20" |
Determine the bottom of the node in pixels or other unit of measure. |
L | left |
l="10" , left="20" |
Determine the left of the node in pixels or other unit of measure. |
Exist a extensive documentation here: DOCS.md.
The code and the documentation is under the Licence MIT.