Limio
WebsiteHelp Desk
  • Home
  • Custom Components
    • Getting Started with Custom Components
    • Connecting External CI
    • Development Guidelines
    • Prop Types
    • Custom subcomponents
    • Connecting to External Service
  • Limio SDK
    • Getting Started with Limio SDK
    • Basket (Cart), Promo Code
    • Page, Offer, and Add-On
    • User, Subscription, Invoice & Address
    • Advanced Methods
      • Express Checkout
      • Core Utilities and Helpers
  • API Docs
    • Authentication Schemes
      • OAuth Bearer Token
      • API Key (Catalog API-only)
    • Catalog API
    • Promo Codes API
    • Order API
    • Objects API
    • Shop Build & Publish API
    • External Identities API
  • Webhooks
    • Using Webhooks
    • Webhooks Overview
  • I want to...
    • Retrieve abandoned baskets
    • Enable self-service on a CPQ order
Powered by GitBook
On this page

Was this helpful?

  1. Custom Components

Prop Types

Learn more about the Prop Types available to Custom Components in Limio

In React, PropTypes are a way to document and validate the properties (or props) passed to components. They ensure that the expected data types and structures are provided, improving the reliability and maintainability of your components.

At Limio, we use a specific set of Prop Types to enhance flexibility and ensure compatibility with our components. These Prop Types cover a range of common use cases, from basic strings to complex schemas. Below is an overview of the supported Limio Prop Types, with examples:

Limio Prop Types

String

{
  "id": "headline",
  "label": "Headline",
  "type": "string",
  "default": "Counting down"
}

Rich Text

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>"
}

Boolean

This prop type will show an on/off toggle.

{
  "id": "hideOnExpire",
  "label": "Hide on expire?",
  "type": "boolean",
  "default": true
}

Color

This prop type will show a colour picker.

{
  "id": "arrowColor__limio_color",
  "label": "Mobile swipe arrow color",
  "type": "color",
  "default": "#4444444"
}

Date Time

This prop type will show a date/time picker.

{
  "id": "expiryDateTime",
  "label": "Expiry Date/Time",
  "type": "datetime",
  "default": "2020-12-10T11:30:42.809Z"
}

List

{
  "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"
    }
  ]
}

Picklist

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"
}

Schema

{
  "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."
        }
      ]
    }
  ]
}
PreviousDevelopment GuidelinesNextCustom subcomponents

Last updated 3 months ago

Was this helpful?