An ESLint plugin for adding 'data-attribute' to React components. The purpose of this plugin is to automatically make css selectors. Here is an example:
const MyComponent = () => (
<div />
);
This plugin will autofix and add the data-component prop to the div:
const MyComponent = () => (
<div data-component="MyComponent" />
);
This plugin is intended to not be too opinionated. In general the approach is to suggest to the developer to add 'data-component' when there is an obvious approach, but in questionable cases, the plugin will tend towards being quiet. Click to learn more about the covered cases.
Note: This plugin cannot guarantee that the data-component prop will actually make it to the DOM node if the top level element is another React component. For it to work effectively, make sure you are properly forwarding props with the JSX spread syntax.
You'll first need to install ESLint:
npm i eslint --save-devNext, install @fullstory/eslint-plugin-annotate-react:
npm install @fullstory/eslint-plugin-annotate-react --save-devAdd @fullstory/eslint-plugin-annotate-react to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:
{
"plugins": ["@fullstory/annotate-react"]
}Then configure the rules you want to use under the rules section.
{
"rules": {
"@fullstory/annotate-react/data-component": "error"
}
}Tests can be ran using
npm run test
...
Run this command to bump the version, push the tag, and create the release on GitHub:
npx np <patch | minor | major> --no-publish --no-tests