Ce projet est une bibliothèque de formulaires réutilisables pour les applications web.

• Variété de boutons, d'entrées et de formulaires préconçus.
• Personnalisable en termes de style, de couleur et de comportement.
• Thèmes prédéfinis disponibles pour une harmonisation rapide.
• Solution complète et flexible pour les nouveaux projets ou les mises à jour d'applications existantes.
• Facilite l'intégration et améliore l'expérience utilisateur.

Installation

Pour commencer à utiliser la bibliothèque, suivez ces étapes :

  npm i @shark-man/react-form

les listes des classes et des props

| Nom de la Classe | Description | |------------------|---------------------------------------------| | basic-form | Classe pour un formulaire standard | | vectorForm | Classe pour un formulaire avec un thème vectoriel | | animal-form | Classe pour un formulaire avec un thème animalier |

Props pour les champs Input :

| Props | Description | Exemple | |-------------|----------------------------------------|------------------------------------------------------------| | type | Type de champ (par exemple, "text", "password", etc.) | type="password" | | name | Nom du champ dans le formulaire | name="password" | | placeholder | Texte à afficher en tant que placeholder dans le champ | placeholder="Password" | | label | Étiquette du champ | label="Password" | | pattern | Modèle de validation du champ(vous pouvez aussi ajouter les votres) | pattern="(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}" | | errorMessage| Message d'erreur affiché en cas de validation échouée | errorMessage="Password must be 8-20 characters and include 1 number, 1 letter, and 1 special character." |

Ce code présente un formulaire de collecte d'informations dans une application React en utilisant des 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>Information</h2>
        <Input type="text" placeholder="firstname" />
        <Input type="text" placeholder="lastname" />
        <Input type="number" placeholder="age" />
        <label>i have a handicap</label>
        <label htmlFor="">
          <input type="radio" /> Yes
        </label>
        <label htmlFor="">
          <Input type="radio" /> No
        </label>

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

        <button> Submit </button>
      </Form>
    </>
  );
}
export default App;

Voici le rendu!

Ce code crée un formulaire de connexion dans une application React en utilisant des 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: " ",
    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="vectorForm">
        <h2>Login</h2>
        <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!

Ce code montre comment créer un formulaire d'inscription dans une application React en utilisant des 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!

Ce code représente un formulaire de connexion React qui utilise les composants Input et Form du package "@shark-man/react-form", avec validation des données pour les champs de nom d'utilisateur et de mot de passe.

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

function App() {
  return (
    <Form className="basic-form">
      <h2> Login </h2>
      <Input
        type="text"
        name="username"
        placeholder="username"
        label="username"
        pattern="^[A-Za-z0-9]{3,16}$"
        errorMessage="user name muste be 3-16 characters"
      />
      <Input
        type="password"
        name="password"
        placeholder="Password"
        label="Password"
        pattern="(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}"
        errorMessage="Password must be 8-20 characters and include 1 number, 1 letter, and 1 special character."
      />
    </Form>
  );
}

export default App;

Voici le rendu!

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

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

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

export default App;

Voici le rendu!