Limio Props (Legacy)
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:{
"name": "headings",
"version": "1.0.0",
"description": "A headings component",
"main": "./index.js",
"author": "",
"dependencies": {
"@limio/catalog": "^2.1.0",
"react": "^16.14.0",
"react-i18next": "^11.3.1"
},
"limioProps": [
{
"id": "heading",
"label": "Heading",
"type": "string",
"default": "Lorem ipsum dolor sit amet"
},
{
"id": "subheading",
"label": "Subheading",
"type": "string",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}
{
"id": "componentId",
"label": "Component Id",
"type": "string",
"default": "headings-limio"
}
]
}
{
"id": "headline",
"label": "Headline",
"type": "string",
"default": "Counting down"
}
Rich text props are saved as a string of HTML so will need to be rendered using dangerouslySetInnerHTML.
{
"id": "description__limio_richtext",
"label": "Description",
"type": "richtext",
"default": "<p><strong>Digital</strong></p><p>Description</p><p>No code</p><p>Modern Design</p><p>Server side rendered</p>"
}
This prop type will show an on/off toggle.
{
"id": "hideOnExpire",
"label": "Hide on expire?",
"type": "boolean",
"default": true
}
This prop type will show a colour picker.
{
"id": "arrowColor__limio_color",
"label": "Mobile swipe arrow color",
"type": "color",
"default": "#4444444"
}
This prop type will show a date/time picker.
{
"id": "expiryDateTime",
"label": "Expiry Date/Time",
"type": "datetime",
"default": "2020-12-10T11:30:42.809Z"
}
{
"id": "buttons",
"label": "Buttons",
"type": "list",
"fields": {
"buttonText": {
"id": "buttonText",
"label": "Button text",
"type": "string"
},
"buttonLocation": {
"id": "buttonLocation",
"label": "Button link",
"type": "string"
}
},
"default": [
{
"buttonText": "Learn More",
"buttonLocation": "https://limio.com"
}
]
}
This prop type will show a pick list of all the options with only one being selectable.
{
"id": "layout",
"label": "Card layout",
"type": "picklist",
"options": [
{
"id": "center",
"label": "Center",
"value": "center"
},
{
"id": "left",
"label": "Left",
"value": "left"
},
{
"id": "right",
"label": "Right",
"value": "right"
}
],
"default": "left"
}
{
"id": "consents",
"label": "Consents",
"type": "schema",
"default": [
{
"type": "radio",
"org": "generic",
"title": "Contact Permissions",
"for": "email",
"options": [
{
"id": "yes",
"label": "<p>Yes. I'd like to receive marketing emails.</p>"
},
{
"id": "no",
"label": "<p>No. I don't want to receive marketing emails.</p>"
}
]
},
{
"type": "checkbox",
"org": "generic",
"title": "Terms and Conditions",
"for": "terms",
"options": [
{
"id": "terms",
"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>",
"required": true,
"requiredMessage": "Please accept to continue."
}
]
}
]
}
Last modified 2mo ago