Creating a component

In this walk-through, we are going to create a re-usable 'Call To Action component' and add it as an asset in Limio, so that a marketing user can configure the component for use on a page.

Adding an example component as an Asset to Limio
Call to action
This component will offer the marketing user the ability to change:
Headline
Subline
Call to action text
Call to action url
Image
The terms and condition text
The terms and condition url
Limio components are React components. Anything that you can package up into a React component can be used in Limio (see this section for more details on how to structure your own components and some guidelines about what is accepted in a component)
Let's take this example component:
1
import * as React from "react";
2
import "./banner.css";
3
​
4
const CTABanner = ({
5
  headline,
6
  subline,
7
  cta_text,
8
  cta_href,
9
  terms_summary,
10
  detailed_terms_href,
11
  image_href,
12
}) => {
13
  return (
14
    <section className="CTABanner">
15
      <article className="Container">
16
        <header>
17
          <h1 className="Headline">{headline}</h1>
18
          <h2 className="Subline">{subline}</h2>
19
​
20
          <a className="CTAButton" href={cta_href} color="#191414">
21
            <span>{cta_text}</span>
22
          </a>
23
​
24
          <div className="Terms">
25
            <p>
26
              {terms_summary}{" "}
27
              {detailed_terms_href && (
28
                <a href={detailed_terms_href}>Terms apply.</a>
29
              )}
30
            </p>
31
          </div>
32
        </header>
33
        <img src={image_href} alt="headphones" />
34
      </article>
35
    </section>
36
  );
37
};
38
​
39
export default CTABanner;
Copied!
To add this example component to your Limio Catalog:
 Download the example code here or clone it with the following:
1
git clone https://github.com/limiohq/cta-banner.git
Copied!
Upload the asset to the catalog:
1.Go to the assets section of Limio using the side navigation
2.Click the "+" icon above the Assets tree
3.Click "Add Assets"
4.Give your asset a new name
5.Select the template - should be "AssetBase" unless you have a custom template set up
6.Drag the directory of the example you just downloaded onto the drop area
7.Wait for the asset to upload, this may take a few minutes depending on size of your component
8.When complete you should see the code of your index.js file.
9.Click 'Save'
The fields marketers can configure components with are set in the component package.json file, inside an array with the key limioProps. You can see these in the example here.
When the component is dragged into a page builder these fields will be populated in a menu for the marketer to configure how they like and these values are then always passed into the component when rendering it.
 That's it - you are done and your marketing users will have access to a new component that they can configure.
Adding your own component as an Asset to Limio
The process above shows you how to upload an example asset which conforms to the requirements of a component being uploaded to Limio.
This is a list of those requirements & notes on anything that you should/should not do with your component:
Your component module must be exported as the default export from your entry file.
You can structure your component across many files in multiple directories or just in a single file.
Only .css files are supports for styling.
Only a small number of external packages are currently available for use in uploaded components right now. If there is a specific package that you need to use, please contact support and we will try our best to accommodate.
Use limioProps in your package.json to make your component customisable.

Getting Started - Previous

Using the Shop Build & Publish API

Next - Getting Started

Limio Props

Last modified 1yr ago

Copy link

Contents

Adding an example component as an Asset to Limio

Adding your own component as an Asset to Limio