TSLint and React stateless component naming (PascalCase vs. camelCase)

Question

Stateless React components should be named in PascalCase, so React can distinguish between native elements and components. Typescripts naming convention dictates that we should use lowerCamelCase or UPPER_CASE for the name of const variables.

How can I satisfy both (React and tslint)?

Answer 1

I think you have two options here:

1. Use where appopriate comment like this

   /* tslint:disable-next-line:variable-name */

   to disable tslint warning at that particular line

2. Use class components instead of functional ones.

Answer 2

You can add the following rule in you tslint.json:

"variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case"]

Answer 3

I found a compromise, using a function declaration instead of a variable declaration for my component: