Documentation Formidable

Exemple 1 : Formulaire de collecte d'informations

Ce code présente un formulaire de collecte d'informations dans une application React utilisant les composants de la bibliothèque "@shark-man/react-form".

import { Form, Input } from "@shark-man/react-form";

function App() {
  return (
    <Form className="basic-form">
      <h2>Informations</h2>
      <Input type="text" placeholder="prénom" />
      <Input type="text" placeholder="nom" />
      <Input type="number" placeholder="âge" />
      <label>Je suis handicapé</label>
      <label htmlFor="">
        <input type="radio" /> Oui
      </label>
      <label htmlFor="">
        <Input type="radio" /> Non
      </label>

      <select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>

      <button> Envoyer </button>
    </Form>
  );
}

export default App;
        

Voici le rendu !

Exemple 2 : Formulaire de connexion

Ce code crée un formulaire de connexion dans une application React utilisant les composants de la bibliothèque "@shark-man/react-form".

import { Form, Input, InputPassword } from "@shark-man/react-form";
import { useState } from "react";

function App() {
  const [data, setData] = useState({
    email: "",
    mot_de_passe: "",
  });

  const handleSubmit = () => {
    console.log(data);
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setData({
      ...data,
      [name]: value,
    });
  };

  return (
    <Form onSubmit={(e) => e.preventDefault()} className="vectorForm">
      <h2>Connexion</h2>
      <Input
        type="email"
        name="email"
        onChange={handleChange}
        value={data.email}
        placeholder="Email"
      />
      <InputPassword
        name="mot_de_passe"
        onChange={handleChange}
        value={data.mot_de_passe}
        placeholder="Mot de passe"
      />
      <button type="button" onClick={handleSubmit}> Envoyer </button>
    </Form>
  );
}

export default App;
        

Voici le rendu !

Exemple 3 : Formulaire d'inscription

Ce code démontre comment créer un formulaire d'inscription dans une application React utilisant les composants de la bibliothèque "@shark-man/react-form".

import { Form, Input, InputPassword } from "@shark-man/react-form";
import { useState } from "react";
function App() {
  const [data, setData] = useState({
    firstname: "",
    lastname: "",
    email: "",
    password: "",
  });
  const handleSubmit = () => {
    console.log(data);
  };
  const handleChange = (event) => {
    const { name, value } = event.target;
    setData({
      ...data,
      [name]: value,
    });
  };
  return (
    <>
      <Form onSubmit={(e) => e.preventDefault()} className="basic-form">
        <h2>Signup</h2>
        <Input
          type="text"
          name="firstname"
          onChange={handleChange}
          value={data.firstname}
          placeholder="First name"
        />
        <Input
          type="text"
          name="lastname"
          onChange={handleChange}
          value={data.lastname}
          placeholder="Last name"
        />
        <Input
          type="email"
          name="email"
          onChange={handleChange}
          value={data.email}
          placeholder="Email"
        />
        <InputPassword
          name="password"
          onChange={handleChange}
          value={data.password}
          placeholder="Password"
        />
        <button type="button" onClick={handleSubmit}>
          Submit
        </button>
      </Form>
    </>
  );
}

export default App;
        

Voici le rendu !

Exemple 4 : Utilisation du composant Bouton

Ce code importe et utilise un composant Bouton de la bibliothèque "@shark-man/react-form". Il démontre comment créer plusieurs boutons avec différents styles utilisant des classes CSS spécifiques.

import { Button } from "@shark-man/react-form";

function App() {
  return (
    <div>
      <Button className="button-glow">Bouton-lueur</Button>
      <br />
      <Button className="cta-button"> Bouton-cta</Button>
      <br />
      <Button className="button-normal"> Bouton-normal</Button>
      <br />
      <Button className="button-martial"> Bouton-martial</Button>
    </div>
  );
}

export default App;
        

Conclusion

Cette documentation vous a montré comment utiliser les composants de la bibliothèque "@shark-man/react-form" pour créer des formulaires dans vos applications React. Avec ces composants, vous pouvez facilement gérer la collecte d'informations, la connexion des utilisateurs et l'inscription des utilisateurs.