diff --git a/README.md b/README.md index 675b892e13b..e9745893d19 100644 --- a/README.md +++ b/README.md @@ -165,7 +165,7 @@ export * from './actionTypes'; #### Typing Injected Props Props made available through higher order components can be tricky to type. Normally, if a component requires a prop, you add it to the component's interface and it just works. However, working with injected props from [higher order components](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e), you will be forced to supply all required props whenever you compose the component. -``` +```ts interface MyComponentProps { name: string; countryCode?: string; @@ -188,7 +188,7 @@ class OtherComponent extends React.Component<{}, {}> { Instead of tacking the injected props on to the MyComponentProps interface itself, put them on another interface that extends the main interface: -``` +```ts interface MyComponentProps { name: string; countryCode?: string; @@ -201,7 +201,7 @@ interface InjectedProps extends MyComponentProps { Now you can add a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) to the component to derive the injected props from the props object at runtime: -``` +```ts class MyComponent extends React.Component { get injected() { return this.props as InjectedProps; @@ -217,6 +217,25 @@ class MyComponent extends React.Component { All the injected props are now strongly typed, while staying private to the module, and not polluting the public props interface. +## Event Handlers + +Event handlers such as `onChange` and `onClick`, should be properly typed. For example, if you have an event listener on an input element inside a form: +```ts +public onValueChange = (e: React.FormEvent) => { + if (this.props.onChange) { + this.props.onChange( + e.currentTarget.value, + this.props.unit + ); + } + }; +``` +Where you type the event as a `React.FormEvent` of type `HTMLElement`. + +## Class names + +Dynamic class names should use the `classnames` module to simplify how they are created instead of using string template literals with expressions inside. + ### Styling Legacy styles are housed under `common/assets/styles` and written with LESS.