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

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.

⚓ LINK DEMO ⚓

Are practically the same of the library, just the names was changed from kebab-case to camelCase, let see:

Exist a extensive documentation here: DOCS.md.

The code and the documentation is under the Licence MIT.