react-page-layout | Create layouts for react | Frontend Framework library

or if you use yarn.
First Step is that you have to create a layout component, this is a regular react component that has several slots where content can be injected. You define one or more slots by using the <Slot> component and giving them a name. In this case "main". You have to make your app layout aware. In order to do this you use the <LayoutProvider> component to let decendants know about the different layouts of your app. It requires that you specify its layouts prop with an object, where the keys are the names and the values are the layout components;. Note: Your page components don't have to be direct decendents of the <LayoutProvider>, in fact you probably will never use it this way. This is for illustration purposes only. This feature is what allows you to use this package with any routing library. Next you have to create pages. The pages provide the content for the different slots in your layout. To do this we use two components, <Page> and <Section>. You have to pass the layout property to the <Page>, so it knows what layout you want to use. Similarly each <Section> has a slot property that ties it to the slot in the layout for which it provides content. In this case since we only have one layout named public, and it only has one slot named it main we use those values.
First Step is that you have to create a layout component, this is a regular react component that has several slots where content can be injected. You define one or more slots by using the <Slot> component and giving them a name. In this case "main" import React, { Component } from 'react'; import { Slot } from 'react-page-layout'; class PublicLayout extends Component { render() { return ( <div> <header>Page Header</header> <Slot name="main" /> <footer>Page Footer</footer> </div> ); } } export default PublicLayout;
You have to make your app layout aware. In order to do this you use the <LayoutProvider> component to let decendants know about the different layouts of your app. It requires that you specify its layouts prop with an object, where the keys are the names and the values are the layout components; import React, { Component } from 'react'; import { render } from 'react-dom'; import { LayoutProvider } from 'react-page-layout'; import PublicLayout from './layouts/public'; import LoginPage from './pages/login'; // Create a map for all your layouts const layouts = { 'public': PublicLayout, }; class App extends Component { function render() { // Render your page inside // the layout provider return ( <LayoutProvider layouts={layouts}> <LoginPage /> </LayoutProvider> ); } } render(App, document.getElementById('root')); Note: Your page components don't have to be direct decendents of the <LayoutProvider>, in fact you probably will never use it this way. This is for illustration purposes only. This feature is what allows you to use this package with any routing library.
Next you have to create pages. The pages provide the content for the different slots in your layout. To do this we use two components, <Page> and <Section>. import { Page, Section } from 'react-page-layout'; class LoginPage extends Component { render() { return ( <Page layout="public"> <Section slot="main"> <h1> THIS IS THE PAGE CONTENT </h1> </Section> </div> ); } } You have to pass the layout property to the <Page>, so it knows what layout you want to use. Similarly each <Section> has a slot property that ties it to the slot in the layout for which it provides content. In this case since we only have one layout named public, and it only has one slot named it main we use those values.