{"id":15504556,"url":"https://github.com/alanbsmith/babel-plugin-react-add-property","last_synced_at":"2025-04-23T01:06:55.154Z","repository":{"id":46938706,"uuid":"119138152","full_name":"alanbsmith/babel-plugin-react-add-property","owner":"alanbsmith","description":"a Babel plugin for adding data attrs to React components (specifically for styled-components)","archived":false,"fork":false,"pushed_at":"2022-12-07T09:17:13.000Z","size":586,"stargazers_count":21,"open_issues_count":13,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-23T01:06:50.022Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alanbsmith.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-27T06:06:44.000Z","updated_at":"2025-03-15T10:23:45.000Z","dependencies_parsed_at":"2023-01-24T16:30:59.085Z","dependency_job_id":null,"html_url":"https://github.com/alanbsmith/babel-plugin-react-add-property","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fbabel-plugin-react-add-property","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fbabel-plugin-react-add-property/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fbabel-plugin-react-add-property/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fbabel-plugin-react-add-property/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanbsmith","download_url":"https://codeload.github.com/alanbsmith/babel-plugin-react-add-property/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250349055,"owners_count":21415914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T09:18:54.127Z","updated_at":"2025-04-23T01:06:55.136Z","avatar_url":"https://github.com/alanbsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Babel Plugin React Add Property\n\n## Overview\n\nThis is a small Babel plugin for adding data attributes to React JSX elements. I created this plugin\nto add meaningful identifiers for styled components. This allows our components to have a\ndesignated attribute for end-to-end integration tests (without having to add them manually).\n\n### Before\n\n```jsx\n\u003cdiv class=\"Page-jLerck lhFHrB\"\u003e\n  \u003cdiv class=\"Header-dJBcYZ dqmObD\"\u003e...\u003c/div\u003e\n  \u003cdiv class=\"Body-MnRsT gzvZiS\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### After\n\n```jsx\n\u003cdiv class=\"Page-jLerck lhFHrB\" data-test=\"Page\"\u003e\n  \u003cdiv class=\"Header-dJBcYZ dqmObD\" data-test=\"Header\"\u003e\n    ...\n  \u003c/div\u003e\n  \u003cdiv class=\"Body-MnRsT gzvZiS\" data-test=\"Body\"\u003e\n    ...\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Installation\n\nThis package is available on npm as `babel-plugin-react-add-property`, and you can find it\n[here](https://www.npmjs.com/package/babel-plugin-react-add-property).\n\nTo install the latest stable version with Yarn:\n\n```sh\n$ yarn add --dev babel-plugin-react-add-property\n```\n\n...or with npm:\n\n```sh\n$ npm install babel-plugin-react-add-property\n```\n\n## Usage\n\n### Via `.babelrc` (Recommended)\n\n#### DEFAULT CONFIG\n\nIf you don't provide a property name, the attribute name will default to `data-test`.\n\n\u003e _**NOTE:** As these attributes are intended only for testing purposes, we're telling Babel to only\n\u003e use the plugin in our development environment. If you'd like to use this plugin in other\n\u003e environments, you'll need to specify them as well._\n\n```json\n// .babelrc\n\n{\n  \"env\": {\n    \"development\": {\n      \"plugins\": [\"react-add-property\"]\n    }\n  }\n}\n```\n\n#### CUSTOM CONFIG\n\nHowever, if you'd like to have a custom attribute name, you can pass it in with your `.bablerc`.\n\n```json\n// .babelrc\n\n{\n  \"env\": {\n    \"development\": {\n      \"plugins\": [[\"react-add-property\", { \"property\": \"data-qa\" }]]\n    }\n  }\n}\n```\n\nThis custom config would transform this div:\n\n```jsx\n\u003cdiv class=\"Header-dJBcYZ dqmObD\"\u003e...\u003c/div\u003e\n```\n\nto look like this:\n\n```jsx\n\u003cdiv class=\"Header-dJBcYZ dqmObD\" data-qa=\"Header\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n#### Via CLI\n\n```sh\nbabel --plugins react-add-property script.js\n```\n\n#### Via Node API\n\nwithout options:\n\n```js\nrequire('babel-core').transform('code', {\n  plugins: ['react-add-property'],\n});\n```\n\nwith options:\n\n```js\nrequire('babel-core').transform('code', {\n  plugins: [['react-add-property', { property: 'data-qa' }]],\n});\n```\n\n## Contributing\n\nI am thankful for any contributions made by the community. By contributing you agree to abide by\nthe Code of Conduct in the [Contributing Guidelines][coc].\n\n## License\n\n[MIT][license]\n\n[coc]: https://github.com/alanbsmith/babel-plugin-react-add-property/blob/master/.github/CONTRIBUTING.md\n[license]: https://github.com/alanbsmith/babel-plugin-react-add-property/blob/master/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Fbabel-plugin-react-add-property","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanbsmith%2Fbabel-plugin-react-add-property","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Fbabel-plugin-react-add-property/lists"}