-
When you create reusable React components, you want to make sure that people use them correctly. The best way to do this is to use TypeScript in your codebase to give you compile-time checking of your code.
-
If you’re not using TypeScript, you can still use PropTypes to get runtime validation.
-
Using PropTypes:
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<script type="text/babel">
function SayHello({ firstName, lastName }) {
return (
<div>
Hello {firstName} {lastName}!
</div>
);
}
const PropTypes = {
string(props, propName, componentName) {
if (typeof props[propName] !== 'string') {
return new Error(
`Hey, the component ${componentName} needs the prop ${propName} to be a string`
);
}
}
};
SayHello.propTypes = {
firstName: PropTypes.string.isRequired
lastName: PropTypes.string
}
const element = <SayHello firstName={false}>
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>- Using
prop-typesfrom unpkg:
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root');
function SayHello({ firstName, lastName }) {
return (
<div>
Hello {firstName} {lastName}!
</div>
);
}
// prop-types creates a global variable called propTypes
// passing .isRequired
SayHello.propTypes = {
firstName: PropTypes.string.isRequired,
lastName: PropTypes.string.isRequired
};
const element = <SayHello firstName={false} />;
ReactDOM.render(element, rootElement);
</script>
</body>- PropTypes are not rendered on production. You can also remove PropTypes using the babel-plugin-transform-react-remove-prop-types.