Limio Props

 Example package.json
Here is an example of adding limioProps to the package.json file of your component. These will get pulled into your component when it is being rendered in Limio and will also be customisable when inside the page builder:
1
{
2
  "name": "headings",
3
  "version": "1.0.0",
4
  "description": "A headings component",
5
  "main": "./index.js",
6
  "author": "",
7
  "dependencies": {
8
    "@limio/catalog": "^2.1.0",
9
    "react": "^16.14.0",
10
    "react-i18next": "^11.3.1"
11
  },
12
  "limioProps": [
13
    {
14
      "id": "heading",
15
      "label": "Heading",
16
      "type": "string",
17
      "default": "Lorem ipsum dolor sit amet"
18
    },
19
    {
20
      "id": "subheading",
21
      "label": "Subheading",
22
      "type": "string",
23
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
24
    }
25
    {
26
      "id": "componentId",
27
      "label": "Component Id",
28
      "type": "string",
29
      "default": "headings-limio"
30
    }
31
  ]
32
}
Copied!
Limio Props Types
String
1
{
2
  "id": "headline",
3
  "label": "Headline",
4
  "type": "string",
5
  "default": "Counting down"
6
}
Copied!
Rich Text
Rich text props are saved as a string of html so will need to be rendered using dangerouslySetInnerHTML.
1
{
2
  "id": "description__limio_richtext",
3
  "label": "Description",
4
  "type": "richtext",
5
  "default": "<p><strong>Digital</strong></p><p>Description</p><p>No code</p><p>Modern Design</p><p>Server side rendered</p>"
6
}
Copied!
Boolean
This prop type will show an on/off toggle.
1
{
2
  "id": "hideOnExpire",
3
  "label": "Hide on expire?",
4
  "type": "boolean",
5
  "default": true
6
}
Copied!
Color
This prop type will show a colour picker.
1
{
2
  "id": "arrowColor__limio_color",
3
  "label": "Mobile swipe arrow color",
4
  "type": "color",
5
  "default": "#4444444"
6
}
Copied!
Date Time
This prop type will show a date/time picker.
1
{
2
  "id": "expiryDateTime",
3
  "label": "Expiry Date/Time",
4
  "type": "datetime",
5
  "default": "2020-12-10T11:30:42.809Z"
6
}
Copied!
List
1
{
2
  "id": "buttons",
3
  "label": "Buttons",
4
  "type": "list",
5
  "fields": {
6
    "buttonText": {
7
      "id": "buttonText",
8
      "label": "Button text",
9
      "type": "string"
10
    },
11
    "buttonLocation": {
12
      "id": "buttonLocation",
13
      "label": "Button link",
14
      "type": "string"
15
    }
16
  },
17
  "default": [
18
    {
19
      "buttonText": "Learn More",
20
      "buttonLocation": "https://limio.com"
21
    }
22
  ]
23
}
Copied!
Picklist
This prop type will show a pick list of all the options with only one being selectable.
1
{
2
  "id": "layout",
3
  "label": "Card layout",
4
  "type": "picklist",
5
  "options": [
6
    {
7
      "id": "center",
8
      "label": "Center",
9
      "value": "center"
10
    },
11
    {
12
      "id": "left",
13
      "label": "Left",
14
      "value": "left"
15
    },
16
    {
17
      "id": "right",
18
      "label": "Right",
19
      "value": "right"
20
    }
21
  ],
22
  "default": "left"
23
}
Copied!
Schema
1
{
2
  "id": "consents",
3
  "label": "Consents",
4
  "type": "schema",
5
  "default": [
6
    {
7
      "type": "radio",
8
      "org": "generic",
9
      "title": "Contact Permissions",
10
      "for": "email",
11
      "options": [
12
        {
13
          "id": "yes",
14
          "label": "<p>Yes. I'd like to receive marketing emails.</p>"
15
        },
16
        {
17
          "id": "no",
18
          "label": "<p>No. I don't want to receive marketing emails.</p>"
19
        }
20
      ]
21
    },
22
    {
23
      "type": "checkbox",
24
      "org": "generic",
25
      "title": "Terms and Conditions",
26
      "for": "terms",
27
      "options": [
28
        {
29
          "id": "terms",
30
          "label": "<p>I agree with the <a href=\"https://www.limio.com?open=terms-and-conditions\" rel=\"noopener noreferrer\" target=\"_blank\">Terms and Conditions</a></p>",
31
          "required": true,
32
          "requiredMessage": "Please accept to continue."
33
        }
34
      ]
35
    }
36
  ]
37
}
Copied!

Getting Started - Previous

Creating a component

Next - Limio SDK

Getting Started

Last modified 11mo ago

Copy link

Contents