# @artezio/player

> QuestionnairePlayer is a react component, use it to pass the questionnaire. It requires two properties to be rendered: questionnaire and questionnaireResponse model made with [@artezio/models](https://github.com/Artezio/SURVEYBUILDER/tree/master/packages/

Latest version **0.1.11** (published 2020-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @artezio/player
pnpm add @artezio/player
yarn add @artezio/player
bun add @artezio/player
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2020-03-31 |
| First published | 2019-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 119.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Maintainers | daniil_yakovenko, kluiko |

## Links

- npm: https://www.npmjs.com/package/@artezio/player
- Repository: https://github.com/Artezio/SURVEYBUILDER/tree/master/packages/player
- npm.io page: https://npm.io/package/@artezio/player

## Dependencies (2)

- [informed](https://npm.io/package/informed.md) ^2.11.16
- [@fortawesome/fontawesome-free](https://npm.io/package/@fortawesome/fontawesome-free.md) ^5.8.1

## Recent versions

- 0.1.11 (latest) — 2020-03-31
- 0.1.10 — 2019-12-24
- 0.1.9 — 2019-12-23
- 0.1.6 — 2019-12-23
- 0.1.5 — 2019-12-20
- 0.1.4 — 2019-12-20
- 0.1.3 — 2019-12-18

## README

# **@artezio/player**

QuestionnairePlayer is a react component, use it to pass the questionnaire. It requires two properties to be rendered: questionnaire and questionnaireResponse model made with [@artezio/models](https://github.com/Artezio/SURVEYBUILDER/tree/master/packages/models/README.md "@artezio/models").
Component has 3 more properties: onSubmit, onError, forwardRef. Use them to handle submit, handle error, initiate submit.

* onSubmit - A function that gets called when form is submitted successfully. The function receives the questionnaireResponse as a parameter.
* onError - A function that gets called when submission fails due to errors. Function will receive the errors.
* forwardRef - React ref that is attached to form.
### Example of using ref:
```TSX
const MyComponent = () => {
const formRef = React.createRef();
const onClick = () => {
    const form = formRef.current;
    if(form) {
        form.formApi.submitForm();
    }
}
return (<>
    <QuestionnairePlayer forwardRef={formRef} questionnaireResponseModel={yourModel} questionnaire={yourQuestionnaire} />
    <button onClick={onClick}>Submit</button>
    </>)
}
```

# Installation

Using npm:
>npm install @artezio/player

Using yarn:
>yarn add @artezio/player

Library has few peer dependencies which you should know about. Install them all with one command: 

>$ npm install @artezio/observable @artezio/observable-react @artezio/models

As an alternative you may want to install all in one touch. Check it out [README](https://github.com/Artezio/SURVEYBUILDER/).

&nbsp;
# Example

```TSX
import React from 'react';
import { render } from 'react-dom';
import { QuestionnaireResponse } from '@artezio/models';
import axios from 'axios';// for example

export class MyComponent extends React.Component {
    formRef = React.createRef();

    onSubmit(questionnaireResponse) {
        axios.post('http://example.com', questionnaireResponse);
    }

    onClick() {
        const form = this.formRef.current;
        if(form) {
            form.formApi.submitForm();
        }
    }

    render() {
        const {questionnaire, questionnaireResponse} = this.props;
        return (<>
            <QuestionnairePlayer questionnaire={questionnaire} questionnaireResponseModel={questionnaireResponse} onSubmit={this.onSubmit.bind(this)} forwardRef={this.formRef} />
            <button onclick={this.onClick.bind(this)}>Submit</button>
        </>)
    }
}
```

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