Skip to main content

Bitly field React JS

npm NPM

Bitly field React JS

Technologies

#javascript #react #bitly-api #typescript

Overview

Bitly field is a library with customized text field component for React JS, that is using Bitly API so users are able to get response with shorten link directly from this input field. The field is configurable, so it can be used for different requirements.

Getting started

Installation

npm install bitly-field-react

Usage

import BitlyField from 'bitly-field-react';

...

<BitlyField
config={{
accessToken: {YOUR_BITLY_ACCESS_TOKEN}, // REQUIRED
domain: null, // String (optional)
title: null, // String (optional)
group_guid: null, // String (optional)
tags: [] // Array of strings (optional)
deeplinks: [], // Array of object (optional)
}}
onSuccess={(response) => callback(response)}
onError={(error) => callback(error)}
/>
...

Types

SuccessResponse {
id: string;
link: string;
long_url: string;
deeplinks: any[];
custom_bitlinks: any[];
created_at: string;
archived: boolean;
tags: any[];
references: any;
};

config: {
accessToken: string;
domain?: string | null;
title?: string | null;
group_guid?: string | null;
tags?: string[];
deeplinks?: any[];
};
onSuccess: (response: SuccessResponse) => void;
onError?: (error: any) => void;
className?: string | null;
placeholder?: string;
inputClassName?: string | null;
buttonClassName?: string | null;

Docs

Bitly API documentation

dev.bitly.com/v4

config: {
accessToken: {YOUR_BITLY_ACCESS_TOKEN} // REQUIRED
domain: null, // String (optional)
title: null, // String (optional)
group_guid: null, // String (optional)
tags: [] // Array of strings (optional)
deeplinks: [], // Array of object (optional)
}

onSuccess => response = {
id: String, // bit.ly/3g8v5gj
link: String, // https://bit.ly/3g8v5gj
long_url: String, // http://masso.sk/
deeplinks: Array, // []
custom_bitlinks: Array, // []
created_at: String, // 2020-06-29T14:04:03+0000
archived: Boolean, // true || false
tags: Array, // []
references: Object, // {group: ""}
};

Props

NAMETYPEDEFAULT VALUE
configObject (required)
onSuccessFunction (required)
onErrorFunction() => null
placeholderStringnull
inputClassNameStringnull
buttonClassNameStringnull
classNameStringnull

Sources