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
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
NAME | TYPE | DEFAULT VALUE |
---|---|---|
config | Object (required) | |
onSuccess | Function (required) | |
onError | Function | () => null |
placeholder | String | null |
inputClassName | String | null |
buttonClassName | String | null |
className | String | null |