Introduction to Prop-Types in React

Prop-types is a runtime type checking feature in React that ensures the props passed to components are of the correct type. This guide aims to provide a comprehensive understanding of prop-types along with dozens of useful API explanations and code snippets.

Installing Prop-Types

First, you need to install the prop-types package.

  
    npm install prop-types
  

Basic Usage

Here’s how you can define basic prop types for a React component:

  
    import PropTypes from 'prop-types';
    import React from 'react';

    const MyComponent = ({ title, age }) => (
        <div>
            <h1>{title}</h1>
            <p>Age: {age}</p>
        </div>
    );

    MyComponent.propTypes = {
        title: PropTypes.string,
        age: PropTypes.number
    };

    export default MyComponent;
  

ArrayOf, ObjectOf, and Shape Prop Types

Prop-types provide various options to deal with arrays and objects.

ArrayOf

Use PropTypes.arrayOf to specify the type of elements in the array.

  
    MyComponent.propTypes = {
        hobbies: PropTypes.arrayOf(PropTypes.string)
    };
  

ObjectOf

Use PropTypes.objectOf to specify the type of values in an object where the keys are unspecified.

  
    MyComponent.propTypes = {
        socialMediaHandles: PropTypes.objectOf(PropTypes.string)
    };
  

Shape

Use PropTypes.shape to describe the type of a specific object structure.

  
    MyComponent.propTypes = {
        user: PropTypes.shape({
            name: PropTypes.string,
            age: PropTypes.number
        })
    };
  

oneOf and oneOfType Prop Types

oneOf

Use PropTypes.oneOf to specify that the prop can be one of a specified set of values.

  
    MyComponent.propTypes = {
        status: PropTypes.oneOf(['active', 'inactive', 'pending'])
    };
  

oneOfType

Use PropTypes.oneOfType to specify that the prop can be of one of the specified types.

  
    MyComponent.propTypes = {
        id: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string
        ])
    };
  

Default Prop Values

You can define default values for props using defaultProps.

  
    MyComponent.defaultProps = {
        title: 'Default Title',
        age: 18
    };
  

App Example Using Prop-Types

Here’s an example of a simple app using the above-mentioned prop types:

  
    import React from 'react';
    import PropTypes from 'prop-types';

    const Profile = ({ name, age, hobbies, status, user, socialMediaHandles }) => (
        <div>
            <h1>Profile</h1>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
            <h2>Hobbies:</h2>
            <ul>
                {hobbies.map((hobby, index) => (
                    <li key={index}>{hobby}</li>
                ))}
            </ul>
            <p>Status: {status}</p>
            <h2>User Information:</h2>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
            <h2>Social Media Handles:</h2>
            <ul>
                {Object.entries(socialMediaHandles).map(([platform, handle]) => (
                    <li key={platform}>{platform}: {handle}</li>
                ))}
            </ul>
        </div>
    );

    Profile.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired,
        hobbies: PropTypes.arrayOf(PropTypes.string),
        status: PropTypes.oneOf(['active', 'inactive', 'pending']),
        user: PropTypes.shape({
            name: PropTypes.string,
            age: PropTypes.number
        }),
        socialMediaHandles: PropTypes.objectOf(PropTypes.string)
    };

    Profile.defaultProps = {
        name: 'John Doe',
        age: 28,
        hobbies: ['reading', 'gaming', 'travelling'],
        status: 'active',
        user: {
            name: 'John Doe',
            age: 28
        },
        socialMediaHandles: {
            twitter: 'johndoe',
            facebook: 'john.doe'
        }
    };

    const App = () => (
        <div>
            <Profile />
        </div>
    );

    export default App;
  

By using prop-types, you can catch bugs early and ensure that your components receive the correct props.

Hash: 4c6e66549d1f32425736921e6fa4b1a0952993efbe08baed9b695f802573cf54