I'm looking for a way to forbid passing props that contains a dash - for my components. I only want this to affect custom components, meaning that regular HTML components should be allowed to take <div aria-xxx="asdf"> but not <MyComp aria-label="asdf">. I want to do this because in TypeScript, props beginning with a kebab case like aria-xxx are not type checked. microsoft/TypeScript#32447
We plan on instead creating custom aria props like ariaLabel for components that can take them.
The closest thing I could find was https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md but it doesn't allow me to specify a regex that could pick up every kebab-case named prop which is what I'm looking for.
I could contribute with an addition to this rule if deemed okay.
I'm looking for a way to forbid passing props that contains a dash
-for my components. I only want this to affect custom components, meaning that regular HTML components should be allowed to take<div aria-xxx="asdf">but not<MyComp aria-label="asdf">. I want to do this because in TypeScript, props beginning with a kebab case likearia-xxxare not type checked. microsoft/TypeScript#32447We plan on instead creating custom aria props like
ariaLabelfor components that can take them.The closest thing I could find was https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md but it doesn't allow me to specify a regex that could pick up every kebab-case named prop which is what I'm looking for.
I could contribute with an addition to this rule if deemed okay.