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?

1. 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.

2. 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.