ReactJS PropTypes are the property that is mainly shared between the parent components to the child components.

What is ReactJS PropTypes?

PropTypes is a tool in React that helps us check if the data (props) being passed to a component is of the correct type. Components receive various types of props and PropTypes help make sure that the right kind of data (like a string, number, or object) is passed to your components.

• Type Safety: When the wrong data type is passed in the component, prototypes help find the issues.
• Better Debugging: During development, they give warning messages in the console, which makes it easier to find the bugs.
• Improved Documentation: It acts as self-documentation for your components, showing the expected types of props.
• Prevents Runtime Errors: We can avoid errors caused by unexpected data types during the execution of the application, by enforcing prop types.

How to Use PropTypes in React?

Step 1: Install the prop-types Package

npx create-react-app react-app
cd react-app

npm install prop-types

Project Structure

//src/components/Button.js

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

const Button = ({ label, type }) => {
    return <button className={`btn btn-${type}`}>{label}</button>;
};

Button.propTypes = {
    label: PropTypes.string.isRequired,
    type: PropTypes.oneOf(['primary', 'secondary', 'danger']).isRequired,
};

export default Button;

//src/components/Greeting.js
import React from 'react';
import PropTypes from 'prop-types';

const Greeting = ({ name, age }) => {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>You are {age} years old.</p>
        </div>
    );
};

Greeting.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
};

Greeting.defaultProps = {
    age: 25,
};

export default Greeting;

//src/components/userProfile.js
import React from 'react';
import PropTypes from 'prop-types';

const UserProfile = ({ user }) => {
    return (
        <div>
            <h2>{user.name}</h2>
            <p>Age: {user.age}</p>
            <p>Email: {user.email}</p>
        </div>
    );
};

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

export default UserProfile;

//App.js
import React from 'react';
import Greeting from './components/Greeting';
import Button from './components/Button';
import UserProfile from './components/UserProfile';

const App = () => {
    const user = { name: 'Pushkar', age: 25, email: 'gfg@example.com' };

    return (
        <div>
            <Greeting name="GFG" age={22} />
            <Button label="Click Me" type="primary" />
            <UserProfile user={user} />
        </div>
    );
};

export default App;

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client'; // Import createRoot from react-dom/client
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')); // Create root
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Output:

Common PropTypes Validators

Advanced PropTypes Usage

Default Props

By using the defaultProps we can also specify the default values for props. This is used when certain props are optional and we want to set a default value in case they are not passed.

Greeting.defaultProps = {
    name: 'Guest',
    age: 18,
};

With this, if no name or age is provided, the component will use ‘Guest’ and 18 as default values.

PropTypes with Arrays and Objects

Array of specific types:

Component.propTypes = {
    items: PropTypes.arrayOf(PropTypes.string),
};

Object with specific shape:

Component.propTypes = {
    user: PropTypes.shape({
        id: PropTypes.number.isRequired,
        name: PropTypes.string.isRequired,
    }),
};

PropTypes with Custom Validation

Component.propTypes = {
    age: (props, propName, componentName) => {
        if (props[propName] < 18) {
            return new Error(`${componentName}: ${propName} should be at least 18.`);
        }
    },
};

PropTypes with Enum (One of Specific Values)

We can use oneOf from setting the proper to set of predefined values.

Button.propTypes = {
    type: PropTypes.oneOf(['primary', 'secondary', 'danger']),
};

PropTypes with One of Multiple Types

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

PropTypes vs TypeScript