Can't use Pascal case when declaring a stateless functional component (SFC)

I’m currently having issues declaring SFCs when using the following tslint configuration:

{
  "extends": ["tslint-config-airbnb", "tslint-react", "tslint-config-prettier"]
}

and here is a sample component

import * as React from 'react';

const DummyComponent = () => <div>Hello World!</div>;

export default DummyComponent;

which results in the error

[tslint] variable name must be in lowerCamelCase or UPPER_CASE (variable-name)
const DummyComponent: () => JSX.Element

I know that it is the tslint-config-airbnb causing the issue, but I would have thought that tslint-react would have a rule for Pascal cased SFCs.

I think that this rule is missing. I’d be happy to throw up a PR if that’s the case. I just need to read up a bit on creating rules.

[mellis481]

You can do this:

const dummyComponent = () => <div>Hello World!</div>;

export { dummyComponent as DummyComponent };

[nickytonline]

For now, I’m doing this, but it’s just a hack, as it allows people to write all vars as Pascal case.

{
  "extends": ["tslint-config-airbnb", "tslint-react", "tslint-config-prettier"],
  "rules": {
    // This rule is here for now because of https://github.com/palantir/tslint-react/issues/120
    "variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case"]
  }
}