1.1.1 • Published 3 months ago
react-layouter v1.1.1
React-Layouter
Is a component that give us the use of the library Layouter.js in React JS.
🔧 Installation
npm install layouter.js react-layouter
// o
yarn add layouter.js react-layouter
✨ How Use It?
- 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.
🚀 Demo
⚡ Directives
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. |
📚 ¿Where I can get help?
Exist a extensive documentation here: DOCS.md.
🧾 Licence
The code and the documentation is under the Licence MIT.