Démarrage

Lunatic est une bibliothèque React pour afficher des questionnaires conçus sur l'outil Pogues et générés au format Lunatic-Model via Eno.

Pour commencer

Pour commencer à utiliser Lunatic dans votre application il faut télécharger la dépendance depuis npm.

npm

npm install @inseefr/lunatic

Yarn

yarn add @inseefr/lunatic

pnpm

pnpm add @inseefr/lunatic

Ensuite la librairie se décompose en 2 parties :

• un hook useLunatic() qui permet de lire un fichier Lunatic-Model et d'offrir les différentes fonctionnalités permettant de naviguer dans les composants.
• un composant <LunaticComponents/> qui permet d'afficher la liste des composants.

Exemple

Source

{
  "components": [
    {
      "componentType": "Input",
      "label": {
        "value": "\"Nom de l'occupant principal.\"",
        "type": "VTL|MD"
      },
      "maxLength": 30,
      "id": "surname",
      "description": {
        "value": "\"For example, Bob.\"",
        "type": "VTL|MD"
      },
      "response": {
        "name": "NOM"
      },
      "page": "1"
    }
  ],
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "NOM",
      "componentRef": "name",
      "values": {
        "PREVIOUS": null,
        "COLLECTED": null,
        "FORCED": null,
        "EDITED": null,
        "INPUTTED": null
      }
    }
  ]
}

Data

{}

Code

import {
  type LunaticData,
  type LunaticSource,
  useLunatic,
  LunaticComponents,
} from '@inseefr/lunatic';
import '@inseefr/lunatic/lib/main.css'

type Props = {
  source: LunaticSource;
  data: LunaticData;
};

export function FormRenderer({ source, data }: Props) {
  const { getComponents, Provider } = useLunatic(source, data, {
    initialPage: '1',
  });
  return (
    <Provider>
      <LunaticComponents components={getComponents()} />
    </Provider>
  );
}

Rendu

Loading...