ReactJS PropTypes

In ReactJS PropTypes are the property that is mainly shared between the parent components to the child components. It is used to solve the type validation problem. Since in the latest version of the React 19, PropeTypes has been removed.

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. The react 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.

Note: In the latest version of the react 19 the proptypes has been removed. It was deprecated in react version 15.5.

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: '[email protected]' };

    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

In this example

• three reusable components are there Greeting, Button, and UserProfile, each with PropTypes validation to implement correct prop types and default values.
• Greeting displays a personalized message and age (default age: 25 if not provided).
• Button enforces type as one of ['primary', 'secondary', 'danger'].
• UserProfile expects a user object with name, age, and email.
• The App component renders Greeting, Button, and UserProfile, passing props like name, age, label, type, and user object.
• The index.js file initializes the React app using ReactDOM.createRoot() and renders the App component inside <React.StrictMode>, ensuring best practices and error handling.

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