Typescript definitions request

[paulkyi]

Our project is using TypeScript with React. Is there any plan to create TypeScript definitions for your library?

[olahol]

I'm going to use Flow with react-tagsinput in the future, will provide typescript defs then.

[vitkon]

any progress with this? need help?

[furti]

I'm using react-tagsinput with typescript too. I wrote some quick definitions that work for me right now. Simply put this in a d.ts file inside your src folder.

declare module 'react-tagsinput' {
    export interface TagsInputProps {
        /**
         * An array of tags.
         */
        value: string[];

        /**
         * Callback when tags change.
         * Gets three arguments:
         *  - tags which is the new tag array
         *  - changed which is an array of the tags that have changed
         *  - changedIndexes which is an array of the indexes that have changed
         */
        onChange: (newTags: string[], changedTags: string[], changeIndices: number[]) => void;

        /**
         * Callback from the input box.
         * Gets one argument "value" which is the content of the input box.
         * (onChangeInput is only called if the input box is controlled, for this to happen both inputValue and onChangeInput need to be set)
         */
        onChangeInput?: (value: string) => void;

        /**
         * An array of key codes that add a tag, default is [9, 13] (Tab and Enter).
         */
        addKeys?: number[];

        /**
         * A string to set a value on the input.
         */
        currentValue?: string;

        /**
         * Similar to currentValue but needed for controlling the input box. (inputValue is only useful if you use it together with onChangeInput)
         */
        inputValue?: string;

        /**
         * Allow only unique tags, default is false.
         */
        onlyUnique?: boolean;

        /**
         * Allow only tags that pass this regex to be added.
         */
        validationRegex?: RegExp;

        /**
         * Callback when tags are rejected through validationRegex, passing array of tags as the argument.
         */
        onValidationReject?: (tags: string[]) => void;

        /**
         * Passes the disabled prop to renderInput and renderTag, by default this will "disable" the component.
         */
        disabled?: boolean;

        /**
         * Allow limit number of tags, default is -1 for infinite.
         */
        maxTags?: number;

        /**
         * Add a tag if input blurs. Default false.
         */
        addOnBlur?: boolean;

        /**
         * Add a tags if HTML5 paste on input. Default false.
         */
        addOnPaste?: boolean;

        /**
         * An array of key codes that remove a tag, default is [8] (Backspace).
         */
        removeKeys?: number[];

        /**
         * Specify the wrapper className. Default is react-tagsinput.
         */
        className?: string;

        /**
         * Specify the class to add to the wrapper when the component is focused. Default is react-tagsinput--focused.
         */
        focusedClassName?: string;
    }

    export default class TagsInput extends React.Component<TagsInputProps> {}
}

Afterwards you can Import the component import TagsInput from 'react-tagsinput'; and use it in your components.

The definition is not complete yet. If you need some more properties simply add them to the TagsInputProps interface.

[jagattula]

is there any updates in regards of typescript definitions added to the package?

[mykter]

I wrote some for DefnitelyTyped that got merged yesterday, you should be able to npm install @types/react-tagsinput some point next week.