react-meticulous makes your React Components more strict. You can only pass properties that are available in your components propTypes.
If protect() is used it'll make sure you don't forget to add propTypes to your (new) Components without forcing you to update all your existing Components. Other benefits can come from smaller props objects that could speed up your shouldComponentUpdate methods.
import Meticulous, { protect } from 'react-meticulous'
const DummyComponent = ({ text }) => <div>{ text }</div>
class TestComponent extends Component {
render() {
const { requiredString, optionalString } = this.props
return <div>{requiredString} {optionalString}</div>
}
}
TestComponent.propTypes = {
optionalString: PropTypes.string,
requiredString: PropTypes.string.isRequired
}
const ProtectedComponent = protect(TestComponent)
const ProtectedStatelessComponent = protect(DummyComponent)
render() {
return (
<Meticulous>
{1}
<div>div</div>
<DummyComponent text="unprotected Stateless Component" />{/* will cause console.error */}
<ProtectedComponent requiredString="required string" />
<ProtectedComponent requiredString="required string" optionalString="optional string" />
<ProtectedComponent requiredString="required string (not allowed)" forbiddenProp="this is not allowed"/>{/* will cause console.error */}
</Meticulous>
)
}
render() {
return (
<Meticulous>
<ProtectedComponent requiredString="required string" />
<ProtectedComponent requiredString="required string" optionalString="optional string" />
</Meticulous>
)
}
render() {
return (
<div>
{1}{/* will _NOT_ cause console.error */}
<div>div</div>{/* will _NOT_ cause console.error */}
<DummyComponent />{/* will _NOT_ cause console.error */}
<ProtectedComponent requiredString="required string" />
<ProtectedComponent requiredString="required string" optionalString="optional string" />
<ProtectedComponent requiredString="required string (not allowed)" forbiddenProp="this is not allowed"/>{/* will cause console.error */}
</div>
)
}