PropTypes React

React PropTypes est un mécanisme de validation des props dans React qui permet de vérifier le type des données passées aux composants.

Pourquoi utiliser PropTypes ?

PropTypes aide à :

Détecter les bugs tôt dans le cycle de développement
Documenter les props attendues par un composant
Améliorer la maintenabilité du code

Installation


npm install prop-types


pnpm add prop-types


yarn add prop-types


bun add prop-types

Exemples d’utilisation

Types de base


import PropTypes from 'prop-types';
 
function Welcome(props) {
  return <h1>Bonjour {props.name}</h1>;
}
 
Welcome.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isAdmin: PropTypes.bool,
  hobbies: PropTypes.array,
  user: PropTypes.object
};

Types complexes


import PropTypes from 'prop-types';
 
function UserProfile(props) {
  return (
    <div>
      <h2>{props.user.name}</h2>
      <ul>
        {props.posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}
 
UserProfile.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    email: PropTypes.string
  }),
  posts: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired
    })
  )
};

Valeurs spécifiques


function Button(props) {
  return <button className={props.size}>{props.label}</button>;
}
 
Button.propTypes = {
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  label: PropTypes.string.isRequired
};

Props personnalisées


function Password(props) {
  return <input type="password" value={props.value} />;
}
 
Password.propTypes = {
  value: function(props, propName, componentName) {
    if (props[propName].length < 8) {
      return new Error(
        `Le mot de passe dans ${componentName} doit contenir au moins 8 caractères`
      );
    }
  }
};

Bonnes pratiques

Toujours définir les PropTypes pour les composants réutilisables
Utiliser .isRequired pour les props obligatoires
Documenter les props complexes avec des commentaires
Désactiver PropTypes en production pour de meilleures performances

PropTypes vs TypeScript

PropTypes est utile pour :

Les petits projets
L’ajout rapide de validation
La rétrocompatibilité

TypeScript offre :

Une validation plus complète
Un meilleur support IDE
Une détection d’erreurs à la compilation

Choisissez en fonction de vos besoins et de la taille de votre projet.