Wrapper Component – Locofy Docs

How to structure the Wrapper Component

Importing from Github and Importing using Locofy CLI both require you to create a locofy.config.json file which has the path to the wrapper component.

Currently we support only one wrapper which can be customised to your requirements

Basic Wrapper

The basic wrapper has a single prop for children which it simply returns.

import React from "react";
 
export default function Wrapper({ children }) {
  return children;
}

Importing Custom Styles

You can import your google and custom fonts in your global.css file

body {
  margin: 0;
  line-height: normal;
}
:root {
  /* fonts */
  --font-roboto: Roboto;
  --font-baloo-bhai: "Baloo Bhai";
 
  /* font sizes */
  --font-size-base: 16px;
  --font-size-xl: 20px;
  --font-size-lg: 18px;
  --font-size-sm: 14px;
 
  /* Colors */
  --color-darkgray: #999;
  --color-black: #000;
 
  /* Gaps */
  --gap-xs: 12px;
 
  /* Paddings */
  --padding-xs: 12px;
 
  /* Border radiuses */
  --br-xs: 12px;
}

Here you can import your custom styles defined in global.css into the wrapper component so all the components will have access to them.

import React from "react";
import './globals.css';
 
export default function Wrapper({ children }) {
  return children;
}

Add Context or Theme Providers

Here you can define your own Custom Theme or Context Provider and include that in the wrapper component. This way your components

import * as React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { green, red } from "@mui/material/colors";
 
const outerTheme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});
 
const innerTheme = createTheme({
  palette: {
    primary: {
      main: green[500],
    },
  },
});
 
export default function Wrapper({ children }) {
  return (
    <ThemeProvider theme={outerTheme}>
      <ThemeProvider theme={innerTheme}>
        {children}
      </ThemeProvider>
    </ThemeProvider>
  );
}

Importing Fonts

You can import your google and custom fonts in your global.css file

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhai:wght@400&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
 
@font-face {
  font-family: "Satoshi";
  src: url("/public/Satoshi-Medium.otf");
  font-weight: 500;
}

You can then import the global.css file into your wrapper component

import React from "react";
import './globals.css';
 
export default function Wrapper({ children }) {
  return children;
}

Importing tailwind

You can import your tailwind classes in index.css file

@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  @apply leading-[normal] m-0;
}
*,
::before,
::after {
  border-width: 0;
}

You need to create a postcss.config.js file. You can view the official tailwind documentation here (opens in a new tab).

import tailwindcss from "tailwindcss"
import autoprefixer from "autoprefixer"
 
export default = {
  plugins: [tailwindcss, autoprefixer],
};

You can then import the index.css file into your wrapper component

import React from "react";
import './index.css';
 
export default function Wrapper({ children }) {
  return children;
}

Import from Storybook Manual Prop Mapping