Commerce Layer React Utils

This is a simple collection of React utils and external config files to be used in Commerce Layer micro front-ends.

How to install

npm install @commercelayer/react-utils

or

yarn add @commercelayer/react-utils

How to use

Tailwind config

Tailwind default configs can be imported directly into your local tailwind.config.js file

const config = require("@commercelayer/react-utils/configs/tailwind")

module.exports = {
  ...config,
}

In this way it's possibile to extend the configuration my merging or spreading your own setup.

Example:

module.exports = {
  ...config,
  theme: {
    ...config.theme,
    fontFamily: {
      sans: ["Your custom font"],
    },
}

GlobalStylesProvider

This component takes a primary color HEX string as prop, convert it in HSL value and inject (using styled-components) global css custom properties at :root devel.

These custom properties includes varation of the primary color (--primary-light and --primary-dark), along with a special --contrast color to be used inside buttons or element with primary background.

Example:

import { GlobalStylesProvider } from "@commercelayer/react-utils"

const App = () => {
  return (
    <GlobalStylesProvider primaryColor="#fff000">
      <YourApp />
    </GlobalStylesProvider>
  )
}

We also expose a react component that doesn't use styled-components, but directly add css in the dom.

Example:

import { InjectCssCustomProperties } from "@commercelayer/react-utils"

const App = () => {
  return (
    <>
      <InjectCssCustomProperties primaryColor="#fff000" />
      <YourApp />
    </>
  )
}

Commerce Layer Logo

This is a simple SVG logo exported as React component.

Example:

import { LogoCL } from "@commercelayer/react-utils"

export const Footer = () => {
  return (
    <div>
      Powered by <LogoCL width="135" height="22" className="pl-2" />
    </div>
  )
}