This ESLint plugin is designed to verify that certain components (in React/React Native) have specific props defined. This can be useful to ensure that components have whatever props you want them to have.
If the rules are configured correctly, the plugin will generate an error if a component is missing any of the required props.
The plugin also includes a dependOn
feature that allows you to specify that prop validation for a particular component should only be performed if another prop is present. For example, you could use this feature to validate that a testID
prop exists only if an onPress
prop is also present on a component.
“Can Typescript
be used to achieve this, right?" For required props, yes.
However, while Typescript can identify required props, there are situations where optional props should be present - for example, to perform E2E testing. In these scenarios, this plugin can be used to validate the existence of props without making them required.”
For Javascript developers, this will be a great help to validate the props of the components.
You'll first need to install ESLint:
npm i eslint --save-dev
Next, install eslint-plugin-props-checker
:
npm install eslint-plugin-props-checker --save-dev
Add props-checker
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
{
"plugins": ["props-checker"]
}
Then configure the rules you want to use under the rules section. Once you enable this, it will errors for all the components that we have mentioned.
A sample can be found below.
{
'rules':
{
'props-checker/validator':
[
'error',
{
props:
[
{ propName: 'testID', components: ['Button', { component: 'Text', dependOn: 'onPress' }] },
{ propName: 'accessible', components: ['TextInput'] }
]
}
]
}
}
According to the above configuration, the plugin will throw an error,
- if the
Button
component does not have atestID
prop. - if the
Text
component does not have atestID
prop only if it has anonPress
prop defined. - if the
TextInput
component does not have anaccessible
prop.
You can use the following configurations to customize the plugin. But,
props
,propName
andcomponents
are mandatory.components
can be astring
or anobject
withcomponent
anddependOn
properties.
Props
: Array of validation objectsPropName
: Name of the prop to be validatedComponents
: Array of components to be validated against thepropName
If you need to check whether a prop exists only if another prop exists, you can use the dependOn
feature. This feature allows you to specify that prop validation for a particular component should only be performed if another prop is present.
If you need to ignore the ESLint prop validation of a component in a specific scenario, you can use the ignoreESLintPropValidation
prop. Examples are included below.
- A warning will be generated instead of an error
{ 'rules': { 'props-checker/validator': ['warn', { props: [{ propName: 'customProp', components: ['CustomComponent'] }] }] } }
- Multiple components with multiple dependOn to validate against
testID
prop.
{
'rules':
{
'props-checker/validator':
[
'error',
{
props:
[
{ propName: 'testID', components: [{ component: 'Button', dependOn: 'title' }, { component: 'Text', dependOn: 'onPress' }] }
]
}
]
}
}
- Using
ignoreESLintPropValidation
prop
In this example, as you can see, AnyComponent
must have a anyProp
property.
{ 'rules': { 'props-checker/validator': ['error', { props: [{ propName: 'anyProp', components: [ 'AnyComponent'] }] }] } }
If you want to ignore the ESLint prop validation of the AnyComponent
in a particular situation/screen, you can use the ignoreESLintPropValidation
prop.
<AnyComponent ignoreESLintPropValidation>
If this plugin configurations take too much space from your main eslintrc
file, you can use the extends feature from eslint to keep these rule settings in another file in another directory. Example can be found here.
All PRs are welcome. Please raise an issue before raising a PR.