Merge pull request #95 from iyegoroff/typings

Typings

README.md

@@ -157,6 +157,16 @@ Will result in
   className="user-name" />
 ```
 
+## Typescript
+
+This library has typescript typings, import them the same way as in javascript:
+
+```typescript
+import {DebounceInput} from 'react-debounce-input';
+```
+
+Also there are helper types `DebounceTextArea` and `Debounced` to provide strict interfaces for wrapping components different from standard `<input />`. Check usage examples in `example/typescript-example.tsx`.
+
 ## Development and testing
 
 Currently is being developed and tested with the latest stable `Node 8` on `OSX`.

example/typescript-example.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { DebounceInput, DebounceTextArea, Debounced } from "../src/index";
+
+//  - usage with default 'input' element:
+
+    <DebounceInput
+      className={'some-class'}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {}}
+    />
+
+//  - usage with 'textarea':
+
+    // DebounceTextArea is just a type, so it should be explicitly defined as value
+    const DebounceTextArea: DebounceTextArea = DebounceInput;
+
+    <DebounceTextArea
+      element={'textarea'}
+      rows={1}
+      cols={2}
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {}}
+    />
+
+//  - usage with custom element that has 'value' and 'onChange' props:
+
+    interface MyComponentProps {
+      value?: string | number;
+      onChange: React.ChangeEventHandler<MyComponent>;
+
+      myCustomProp: number; 
+    }
+
+    class MyComponent extends React.Component<MyComponentProps> {}
+
+    const DebouncedMyComponent: Debounced<MyComponent, MyComponentProps> = DebounceInput;
+
+    <DebouncedMyComponent
+      element={MyComponent}
+      myCustomProp={1}         // OK, myCustomProp will be passed down to MyComponent
+      // myInvalidCustomProp={2}  // Error, there is no myInvalidCustomProp in MyComponentProps
+      onChange={(e: React.ChangeEvent<MyComponent>) => {}}
+    />
+

package.json

@@ -3,6 +3,7 @@
   "version": "3.1.0",
   "description": "React component that renders Input with debounced onChange",
   "main": "lib/index.js",
+  "types": "src/index.d.ts",
   "config": {
     "component": "DebounceInput",
     "externals": {
@@ -51,6 +52,7 @@
     "prop-types": "^15"
   },
   "devDependencies": {
+    "@types/react": "^16.0.36",
     "babel-cli": "^6.24.1",
     "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.1",

src/index.d.ts

@@ -0,0 +1,41 @@
+/*
+ *  check usage examples in ./example/typescript-example.tsx 
+ */
+
+import * as React from 'react';
+
+interface PropConstraints<T> {
+  readonly value?: string | number;
+  readonly onChange: React.ChangeEventHandler<T>;
+}
+
+export type DebounceInputProps<WrappedComponent, WrappedComponentProps> = WrappedComponentProps & {
+  readonly element?: string | React.ComponentType<PropConstraints<WrappedComponent>>;
+  readonly type?: string;
+  readonly onChange: React.ChangeEventHandler<WrappedComponent>;
+  readonly onKeyDown?: React.KeyboardEventHandler<WrappedComponent>;
+  readonly onBlur?: React.FocusEventHandler<WrappedComponent>;
+  readonly value?: string | number;
+  readonly minLength?: number;
+  readonly debounceTimeout?: number;
+  readonly forceNotifyByEnter?: boolean;
+  readonly forceNotifyOnBlur?: boolean;
+  readonly inputRef?: React.Ref<WrappedComponent>;
+};
+
+export declare class DebounceInput<
+  WrappedComponent = HTMLInputElement,
+  WrappedComponentProps = React.InputHTMLAttributes<HTMLInputElement>
+> extends React.PureComponent<DebounceInputProps<WrappedComponent, WrappedComponentProps>> {
+
+}
+
+export type Debounced<
+  WrappedComponent,
+  WrappedComponentProps
+> = React.ComponentType<DebounceInputProps<WrappedComponent, WrappedComponentProps>>;
+
+export type DebounceTextArea = Debounced<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>;