• Installation
• Peer Dependencies
• Usage
• Api
  • QuestionForm

Installation

Ska Suite Forms is an npm package.

// with npm
npm install ska-suite-form --save

// with yarn
yarn add ska-suite-form

Peer Dependencies

Npm documentation about Peer dependencies

"peerDependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
}

Usage

Minimal example :

import React from "react";
import ReactDOM from "react-dom";
import QuestionForm from "ska-suite-form";
import Form from "./form"; // Check API for more information

function App() {
  return (
        <QuestionForm
            questionForm={Form}
            width="100%"
            lang="FR"
            accentColor="#0099BC"
            onFormSent={(participation) => console.log(participation)}
        />
    )
}

ReactDOM.render(<App />, document.querySelector('#app'));

Api

QuestionForm

All Style props object must follow React inline style

| Props | Type | Required | Description | | ---------------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------- | | questionForm | object | ✓ | Object generated by Reception Desk Web Designer | | width | string | ✓ | Any valid css width ("100%", "500px" ...) | | lang | string | ✓ | Language code in which the form will be displayed ("FR", "EN"), must be available in the questionForm props | | onFormSent | function | ✓ | Callback for when the form is sent (returns Participation object) | | accentColor | string | ✓ | Hexa code of the accent color used in the form ("#0099BC") | | questionFormTextStyle | object | ✘ | Style of the question form title text | | questionTextStyle | object | ✘ | Style of the question title text | | questionContainerStyle | object | ✘ | Style of the question container | | answerTextStyle | object | ✘ | Style of the answer text | | answerContainerStyle | object | ✘ | Style of the answer container | | inputStyle | object | ✘ | Style of the inputs (contact form) | | thankMessage | string | ✘ | Custom message when form is completed | | thankMessageStyle | object | ✘ | Style of the message when form is completed |