npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sg-form-lib

v2.1.1

Published

Librairie simplifiant la création de formulaires.

Downloads

40

Readme

sg form lib

Librairie ReactJS simplifiant la création de formulaires. La validation du formulaire utilise useForm de React.

Voir la librairie sur npm

Tester la librairie sur CodeSandBox

Site de démonstration

Introduction

Cette librairie contient un composant Form qui permet de créer facilement des formulaires, en utilisant soit des champs prédéfinis dans la librairie, soit en ajoutant vos propres champs. Les champs prédéfinis vous offrent une structure de base pour créer vos formulaires. La gestion des erreurs est prise en compte. Il est possible d'ajouter des patterns. Les champs sont, par défaut, requis. La séléction des champs que vous souhaitez mettre dans le formulaire se fait via la prop{' '} fieldNames, ensuite le formulaire va automatiquement récupérer les données nécessaires dans le fichier de configuration. L'action à réaliser à l'envoi du formulaire se fait via la prop onSubmitFunction, à laquelle vous passez la fonction souhaitée. Exemple :

const handleForm = (formFieldsData) => {
  // what to do on submit
};

<Form
  fieldsConfig={fieldConfigPerso}
  title={'Se connecter'}
  btnText={'Connexion'}
  onSubmitFunction={handleForm}
  validationMessage={validationMessage}
  errorMessage={errorMessage}
  fieldNames={['email', 'password']}
/>;

Champs prédéfinis

Par défaut les champs sont requis.

Les champs prédéfinis incluent :

  • email (input)
  • password (input de type password)
  • passwordConfirmation (input de type password)
  • name (input)
  • age (input type number)
  • tel (input)
  • message (textarea)
  • otherInfos (textarea)
  • gender (radio button)
  • country (select)
  • foodAllergies (checkbox)

Exemples :

  • Input :
   email: {
    label: 'Email',
    type: 'email',
    pattern: /\S+@\S+\.\S+/,
    fieldErrorMessage: 'Veuillez renseigner votre email',
  },
  • Textarea :
    message: {
      tag: 'textarea',
      label: 'Message',
      type: 'text',
      fieldErrorMessage: 'Veuillez renseigner votre message',
    },
  • Radio buttons :
  gender: {
    type: 'radio',
    label: 'Genre',
    fieldErrorMessage: 'Veuillez renseigner votre genre',
    options: [
      {
        label: 'Homme',
        value: 'male',
        name: 'male',
      },
      {
        label: 'Femme',
        value: 'female',
        name: 'female',
        checked: true,
      },
    ],
  },
  • Select :
  country: {
    type: 'select',
    label: 'Pays',
    defaultValue: 'Choisir votre pays',
    fieldErrorMessage: 'Veuillez renseigner votre pays',
    options: [
      {
        label: 'Angleterre',
        value: 'england',
      },
      {
        label: 'Espagne',
        value: 'spain',
      },
      {
        label: 'France',
        value: 'france',
      },
    ],
  },
  • Checkboxes :
  foodAllergies: {
    type: 'checkbox',
    label: 'Allergie(s) alimentaire(s)',
    isRequired: false,
    options: [
      {
        label: 'Gluten',
        value: 'gluten',
        name: 'gluten',
      },
      {
        label: 'Arachides',
        value: 'peanuts',
        name: 'peanuts',
      },
      {
        label: 'Lactose',
        value: 'milk',
        name: 'milk',
      },
    ],
  },

Personnalisation des champs

Par défaut, le composant Form se base sur le fichier default-config.jsx, présent dans la librairie. Ce dernier vous permet de prendre connaissance du format attendu pour chaque type de champs. Il est possible de définir votre propre fichier de configuration. Vous pouvez copier le contenu du fichier default-config.jsx présent dans node_modules/sg-form-lib/config/, Ensuite, où vous le souhaitez vous pouvez créer un fichier personnel (ex : fieldConfigPerso.jsx) et coller le contenu précédemment copié. En fonction de vos besoin, vous pouvez ajouter, modifier ou supprimer ce qui s'y trouve. Pensez à garder le bon format adapté à chaque type de champ. Lorque vous utilisez le composant Form, ajoutez la prop : fieldsConfig={fieldConfigPerso} Pensez au préalable à importer votre fichier :

import { fieldConfigPerso } from '../fieldConfigPerso';

Paramètres des champs

Pour les champs input et textarea :

            label: 'Label', // string - obligatoire
            type: 'text', // string - obligatoire
            tag: 'textarea' // string - facultatif, input par défaut si non spécifié
            hidden: true // boolean - facultatif, masquer un champs, false par défaut si non spécifié
            step: 5 // number - facultatif, pour les champs de type number
            fieldClass: 'custom-field' // string - facultatif, pour ajouter une classe personnalisée
            isRequired: false // boolean - facultatif, true par défaut si non spécifié
            pattern: /\S+@\S+\.\S+/, // regexp - facultatif, null par défaut si non spécifié
            fieldErrorMessage: 'Veuillez écrire quelquechose ici' // string - facultatif, 'Veuillez renseigner ce champs' par défaut

Pour les champs select :

            label: 'Label', // string - obligatoire
            type: 'select', // string - obligatoire
            fieldClass: 'custom-field' // string - facultatif, pour ajouter une classe personnalisée
            defaultValue: 'Choisir votre option', // string - facultatif, 'Choisir une option' par défaut si non spécifié
            fieldErrorMessage: 'Veuillez renseigner le champs', // string - facultatif, 'Veuillez renseigner ce champs' par défaut
            isRequired: false, // boolean - facultatif, true par défaut si non spécifié
            options: [ // array d'objets - obligatoire
            {
                label: 'Angleterre',
                value: 'Angleterre',
            },
            {
                label: 'Espagne',
                value: 'Espagne',
            },
            {
                label: 'France',
                value: 'France',
            },
            ],

Pour les champs radio et checkbox :

            label: 'Label', // string - obligatoire
            type: 'radio', // string - obligatoire
            fieldClass: 'custom-field' // string - facultatif, pour ajouter une classe personnalisée
            fieldErrorMessage: 'Veuillez renseigner le champs', // string - facultatif, 'Veuillez renseigner ce champs' par défaut
            isRequired: false, // boolean - facultatif, true par défaut si non spécifié
            options: [ // array d'objets - obligatoire
                    {
                        label: 'Homme',
                        value: 'male',
                        name: 'male',
                    },
                    {
                        label: 'Femme',
                        value: 'female',
                        name: 'female',
                        checked: true, // pour cocher un élément par défaut
                    },
            ],

Props du composant Form

Ce composant bénéficie d'une ref 'form' : const form = useRef();

<form
      onSubmit={handleSubmit(() =>
        onSubmitFunction(...fieldNames.map((fieldName) => getValues(fieldName)))
      )}
      className='sg-form-lib'
      id={formId}
      ref={form}
      noValidate // validate by useForm hook
    >
  • formId (string) : l'id correspondant au form.
  • fieldsConfig (object) : La configuration des champs. (Facultatif, utilise la configuration par défaut si non spécifiée)
  • title (string) : Le titre du formulaire. (Facultatif)
  • subtitle (string) : Le sous-titre du formulaire. (Facultatif)
  • btnText (string, required) : Le texte du bouton de soumission du formulaire.
  • onSubmitFunction (function, required) : La fonction à appeler lors de la soumission du formulaire.
  • validationMessage (string) : Le message de validation à afficher. (Facultatif)
  • errorMessage (string) : Le message d'erreur à afficher. (Facultatif)
  • fieldNames (array of strings, required) : Les noms des champs à inclure dans le formulaire.
  • fieldValue (object) : Les valeurs initiales des champs. (Facultatif)

Classes CSS utilisées

Le composant Form a une largeur de 100%, penser à le mettre dans un container

Pour personnaliser le style des formulaires, vous pouvez utiliser les classes CSS suivantes :

  • sg-form-lib
  • sg-form-lib__section-title
  • sg-form-lib__title
  • sg-form-lib__subtitle
  • sg-form-lib__content
  • sg-form-lib__message--validation
  • sg-form-lib__message--error
  • sg-form-lib__data
  • sg-form-lib__data--error
  • sg-form-lib__label
  • sg-form-lib__input
  • sg-form-lib__field--error
  • sg-form-lib__textarea
  • sg-form-lib__checkboxes
  • sg-form-lib__checkbox
  • sg-form-lib__radios
  • sg-form-lib__radio
  • sg-form-lib__select

Pré-remplissage du formulaire

Vous pouvez pré-remplir le formulaire avec des données en utilisant la prop fieldValue, qui doit être un objet JSON contenant les données. Le nom du champ dans les données doit correspondre au fieldName du formulaire.

Exemple :

// data.json
{
  "name": "Karl",
  "age": 31,
  "tel": "0620589522",
  "email": "[email protected]",
  "password": "Test1234*"
}
import datas from '../assets/data.json';

<Form
  fieldsConfig={fieldConfigPerso}
  title={'Modifier mes données'}
  btnText={'Valider'}
  onSubmitFunction={handleForm}
  validationMessage={validationMessage}
  errorMessage={errorMessage}
  fieldNames={['name', 'age', 'tel', 'email']}
  fieldValue={datas}
/>;

Capture d'écran d'un formulaire pré remplis

Installation

Via npm : npm i sg-form-lib Via yarn : yarn add sg-form-lib Via pnpm : pnpm i sg-form-lib

N'oubliez pas d'ajouter le CSS dans votre fichier d'entrée (index.jsx ou main.jsx) :

import 'sg-form-lib/style.css';

Exemple d'utilisation

import { useState } from 'react';
import { Form } from 'sg-form-lib';
import data from '../assets/data.json';
import { fieldConfigPerso } from '../fieldConfigPerso';

const DemoConnexion = () => {
  const [validationMessage, setValidationMessage] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleForm = (email, password) => {
    try {
      setErrorMessage('');
      if (email === data.email && password !== data.password) {
        throw new Error('Mot de passe incorrect');
      }
      if (email === data.email && password === data.password) {
        // Here you can manage action when form is well submitted
        setValidationMessage('Formulaire envoyé');
      } else {
        throw new Error('Combinaison incorrect');
      }
    } catch (error) {
      setValidationMessage('');
      setErrorMessage(error.message);
    }
  };
  return (
    <div className='container'>
      <Form
        fieldsConfig={fieldConfigPerso}
        title={'Se connecter'}
        btnText={'Connexion'}
        onSubmitFunction={handleForm}
        validationMessage={validationMessage}
        errorMessage={errorMessage}
        fieldNames={['email', 'password']}
      />
    </div>
  );
};

export default DemoForm;