Providing types

Author: dev-javascript

index.d.ts

@@ -0,0 +1,50 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export type onClearHandler = (ev: any) => void;
+export interface ReactCustomSearchListProps {
+    /**will be shown in popup, if it is null then popup will not be visible */
+    children?: React.ReactNode;
+    /**input value */
+    value: String;
+    /**onChange function for input */
+    onChange: (ev: any) => void;
+    /** style object of the root element */
+    rootStyle?: React.CSSProperties;
+    /** style object of the parent element of text input */
+    inputContainerStyle?: CSSProperties;
+    /** style object of the input element */
+    inputStyle?: CSSProperties;
+    /** style object for popper container */
+    popperStyle?: CSSProperties;
+    /** defautl value is "search" */
+    placeholder?: string;
+    /** keydown handler for the input */
+    onKeyDown?: (ev: any) => void;
+    /** focus handler for the input */
+    onFocus?: (ev: any) => void;
+    /** blur handler for the input */
+    onBlur?: (ev: any) => void;
+    /** set popper width same as input, default value is true */
+    fullWidth?: boolean;
+    /** popper's placement, default value is "bottom-start" */
+    placement?: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /** custom Clear icon */
+    ClearIconComponent?: (props: { value: string, onClear: onClearHandler }) => ReactNode;
+    /** custom Magnifier icon */
+    MagnifierIconComponent?: () => ReactNode;
+    /** triggerd when the user clicks on the default Clear icon */
+    onClear?: onClearHandler;
+    /** searchbox theme, default value is "outline" */
+    theme?: "underline" | "outline" | "panel";
+    /** if set true then borderRadius would be "5px", default value is true */
+    corner?: boolean;
+    /** autoFocus attribute for the input element, default value is false */
+    autoFocus?: boolean;
+    /** name attribute for the input element */
+    inputName?: string;
+    /** if it is true then the suggestion list will be open when the user clicks on the input, default value is true */
+    openOnClick?: boolean;
+    /** it it returns true then the suggestion list will be open, default value is (e) => e.key === 'Enter' */
+    openOnKeyDown?: boolean;
+}
+declare const ReactCustomSearchList: (props: ReactCustomSearchListProps) => ReactNode;
+export default ReactCustomSearchList;

package.json

@@ -116,6 +116,7 @@
   "directories": {
     "lib": "lib"
   },
+  "types": "./index.d.ts",
   "jest": {
     "testEnvironment": "jsdom",
     "setupFilesAfterEnv": [