# questionnaire-ui

> Questionnaire-components works as a wrapper for user's own custom **form** components, which are utilized to create a form based on the response data of a user defined api call.

Latest version **1.0.7** (published 2018-10-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install questionnaire-ui
pnpm add questionnaire-ui
yarn add questionnaire-ui
bun add questionnaire-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2018-10-04 |
| First published | 2018-09-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 15.8 KB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | yellowhill |

## Links

- npm: https://www.npmjs.com/package/questionnaire-ui
- npm.io page: https://npm.io/package/questionnaire-ui

## Dependencies (4)

- [axios](https://npm.io/package/axios.md) ^0.18.0
- [react](https://npm.io/package/react.md) ^16.5.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2

## Recent versions

- 1.0.7 (latest) — 2018-10-04
- 1.0.6 — 2018-10-03
- 1.0.5 — 2018-10-02
- 1.0.4 — 2018-09-26
- 1.0.3 — 2018-09-26
- 1.0.2 — 2018-09-26
- 1.0.1 — 2018-09-26
- 1.0.0 — 2018-09-26

## README

# Questionnaire-component

## Description

Questionnaire-components works as a wrapper for user's own custom **form** components, which are utilized to create a form based on the response data of a user defined api call.

The Questionnaire _requires_ a **config**-property, which is an object that _needs_ to have the following properties itself: **url** and **components**.

The **url**-property requires the api-url from which the component gets the data used to create the actual questionnaire-ui. The return data from the api-call is always in the following structure:

```javascript
{
    "form": {
        "name": "Stupid questionnaire",
        "code": "STUPIDQUESTIONNAIRE",
        "locale": "1350",
        "group": "Clients",
        "questions": [
            {
                "code": "GENDER",
                "type": "Select",
                "order": "1",
                "text": "What is your gender?",
                "options": [
                    {
                        "order": "1",
                        "text": "Male",
                        "value": "M"
                    },
                    {
                        "order": "2",
                        "text": "Female",
                        "value": "F"
                    }
                ]
            },
                        {
                "code": "NAME",
                "type": "Text",
                "order": "2",
                "text": "What is your name",
            },
            {
                "code": "AGE",
                "type": "Slider",
                "order": "3",
                "text": "How old are you?",
                "minValue": "0",
                "maxValue": "120",
                "step": "1"
            },
        ]
    }
}
```

The **components**-property in the **config**-object is an object holding the mappings connecting the user defined form-components to the Questionnare api. The Questionnaire supports the following component-mappings:

- Checkbox
- Radio
- Select
- Slider
- Text

The **config**-object can also have the following optional properties: **skipQuestionCodes**, **headers**. The **skipQuestionCodes**-property can hold an array of strings defining which specific questions the user does not want to render. The strings in the array are _not_ case sensitive. In the case of the above Questionnaire data, one could opt out of rendering the the _age-question_ in the following matter:

```javascript
const myConfig = {
    url: 'http://www.my-questinnaire-api-url.com',
    skipQuestionCodes: ['age']
    components: {
        Text: MyTextInput,
        ...
    },
};
<Questionnnaire config={myConfigObj} >
```

The **headers**-property in the **config**-object is used to define what kind of HTTP-headers are send with the API-call. For example, a user can define here which languages the client is able to understand, and which locale variant is preferred:

```javascript
const myConfig = {
	headers: {
		'Accept-language': 'fi-FI',
	},
};
```

_The Questionnaire_ also has the following optional properties: **getFormAnswerStructure**, **onLoadStart**, **onLoadEnd**. The **getFormAnswerStructure** -property expects a function as a value. The function will be called in the _componentDidMount_ -life cycle method of _the Questionnaire_. The function will be called with an object that has a specific structure. This is the structure which the questionnaire-api expects when a quesionnaire is saved with answer-data. The Questionnaire-api expects the answer-data to be in the following structure:

```javascript
{
    "form": {
        "code": "STUPIDQUESTIONNAIRE",
        "locale": "1350",
        "personId": "070707-0707",
        "personName", "Duck Donald"
        "questions": [
            {
                "code": "GENDER",
                "answerValue": "M"
            },
                        {
                "code": "NAME",
                "answerValue": "Matti Meikäläinen"
            }
            {
                "code": "AGE",
                "answerValue": "25"
            },
        ]
    }
}
```

The **onLoadStart** and **onLoadEnd** -properties also expect functions as a value. The **onLoadStart** -function is called when the Questionnaire-component starts fetching data from the API, while the **onLoadEnd**-function is called when the component finishes fetching the data.

In addition to these _Questionnnaire_ specific properties, a user can define any number of additional properties (such as onClick, onFocus, onInput etc.), which are automatically passed to the custom user defined components. Check the usage-section for an example.

## Usage

```javascript
import React from 'react';
import Questionnnaire from 'questionnaire';

const MyTextInput = ({ question, onInput }) => {
	const handleInput = (e) => {
		onInput(Object.assign({}, {question}, { answerValue: e.target.value }));
	};
	return <input placeholder={question.text} onInput={handleInput} />;
};

const myConfig = {
    url: 'http://www.my-questinnaire-api-url.com',
    skipQuestionCodes: ['gender', 'age']
    components: {
        Text: MyTextInput,
    },
    headers: {
		'Accept-language': 'fi-FI',
	},
};

export default class MyQuestionnaire extends React.Component {
    state = {
        formAnswerObj: null,
        isLoading: true
    }

    handleFormAsnwerStructure = (formAnswerObj) => {
        this.setState({
            formAnswerObj
        })
    }

    handleQuestionnaireInput = ({question, answerValue}) => {
        const {formAnswerObj} = this.state;
        const updatedAnswerArray = formAnswerObj.questions.map((q) => {
            if (q.code === question.code) {
                return {
                    answerValue,
                    code: q.code,
                }
            }
        });

        this.setState({
            formAnswerObj: Object.assign({}, formAnswerObj, {questions: updatedAnswerArray})
        });
    }
    handleOnLoadStart = () => {
        this.setState({isLoading: true})
    }

    handleOnLoadEnd = () => {
        this.setState({isLoading: false})
    }

	return (
        <React.Fragment>
            {this.state.isLoading && <p> Questionnaire is fetching data</p>}
            <form>
                <Questionnaire
                    config={myConfig}
                    getFormAnswerStructure={this.handleFormAsnwerStructure}
                    onInput={this.handleQuestionnaireInput}
                    onLoadStart: {this.handleOnLoadStart},
                    onLoadEnd: {this.handleOnLoadEnd},
                />
            </form>
        </React.Fragment>

	);
};
```

---
_Source: https://npm.io/package/questionnaire-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._