Skip to content

Tools that allow you to map app layouts and structures from GUI generated data into arrays of front end components.

Notifications You must be signed in to change notification settings

Ant3ney/layouter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Layouter

A package designed to save time in connecting your CMS app layouts to your arrangements of react components.

Install

npm -i --save layouter-tools

Usage

Import nessisary dependencies

import { Provider, Body } from 'layouter-tools';

Define the layouterToolsOptions variable

function App() {
	const layouterToolsOptions = {
		PUBLIC_API_KEY: 'bjwi19ta',
		sectionMap: [
			{
				section: 'landingScreenSection',
				component: () => {
					return <div>This is the Landing section</div>;
				},
			},
			{
				section: 'funnelItem01Section',
				component: () => {
					return <div>This is the Funnel section</div>;
				},
			},
			{
				section: 'shopDisplaySection',
				component: () => {
					return <div>This is the shop section</div>;
				},
			},
		],
	};
}

export default App;

Use layouterToolsOptions as a prop for the Provider component

function App() {
	return (
		<div className='App'>
			<Provider options={layouterToolsOptions}>
				<Body />
			</Provider>
		</div>
	);
}

export default App;

Entire Usage example

//App.js of Create React app
import logo from './logo.svg';
import './App.css';
import { Provider, Body } from 'layouter-tools';

function App() {
	const layouterToolsOptions = {
		PUBLIC_API_KEY: '******',
		sectionMap: [
			{
				section: 'landingScreenSection',
				component: () => {
					return <div>This is the Landing section</div>;
				},
			},
			{
				section: 'funnelItem01Section',
				component: () => {
					return <div>This is the Funnel section</div>;
				},
			},
			{
				section: 'shopDisplaySection',
				component: () => {
					return <div>This is the shop section</div>;
				},
			},
	};
	return (
		<div className='App'>
			<Provider options={layouterToolsOptions}>
				<Body />
			</Provider>
		</div>
	);
}

export default App;

About

Tools that allow you to map app layouts and structures from GUI generated data into arrays of front end components.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published