README
react-get-data-cy
Helper function provides a data-cy
testing attribute with a value that can match the text content of the react element.
Demo
Motivation
I wanted to have a dynamic data-cy
testing attribute that can be based on children passed to react element. This package supports string
, JSX.Element
and ReactNode
as value
i.e. second argument.
Getting started
To use this package, you only need to install this dependency, import it and invoke the getDataCy
function, e.g.:
import { getDataCy } from '@lukaspolak/react-getDataCy'
export const FancyComponent: FC = ({ children }) => {
return <div {...getDataCy('fancy component', children)}>{children}</div>
}
Install
npm install @lukaspolak/react-get-data-cy
or
yarn add @lukaspolak/react-get-data-cy
Documentation
This package works well with babel-plugin-react-remove-properties. To configure it, update .babelrc
file.
{
//...
"env": {
"production": {
"plugins": [["react-remove-properties", { "properties": ["data-cy"] }]]
}
}
//...
}
Contributing
Please read the Contribution guidelines to start with your awesome contributions!
@lukaspolak/
Why the library is prefixed with There are a lot of similar libraries/packages on GitHub and npm, that can do the same. I wanted to enhance my programming skills, and I didn't want to find a unique name for the package.
INITIALIZATION TODO
- remove
INITIALIZATION TODO
section - replace quoted text in
README.md
file