https://github.com/cool-hooks/react-shorten-url

🔗 Bitly implementation to React hook
https://github.com/cool-hooks/react-shorten-url

bitly hooks library react shorten url

Last synced: 3 months ago
JSON representation

🔗 Bitly implementation to React hook

• Host: GitHub
• URL: https://github.com/cool-hooks/react-shorten-url
• Owner: cool-hooks
• License: mit
• Created: 2020-05-23T20:46:40.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T11:14:07.000Z (over 3 years ago)
• Last Synced: 2025-10-02T05:27:00.131Z (9 months ago)
• Topics: bitly, hooks, library, react, shorten, url
• Language: TypeScript
• Homepage:
• Size: 1.47 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# [react-shorten-url](https://github.com/cool-hooks/react-shorten-url)

[![NPM version](https://img.shields.io/npm/v/react-shorten-url?style=flat-square)](https://www.npmjs.com/package/react-shorten-url)

[![NPM downloads](https://img.shields.io/npm/dm/react-shorten-url?style=flat-square)](https://www.npmjs.com/package/react-shorten-url)

[![NPM license](https://img.shields.io/npm/l/react-shorten-url?style=flat-square)](https://www.npmjs.com/package/react-shorten-url)

[![Codecov](https://img.shields.io/codecov/c/github/cool-hooks/react-shorten-url?style=flat-square)](https://codecov.io/gh/cool-hooks/react-shorten-url)

[![Travis](https://img.shields.io/travis/com/cool-hooks/react-shorten-url/main?style=flat-square)](https://travis-ci.com/cool-hooks/react-shorten-url)

[![Bundle size](https://img.shields.io/bundlephobia/min/react-shorten-url?style=flat-square)](https://bundlephobia.com/result?p=react-shorten-url)

## About

[Bitly](https://github.com/tanepiper/node-bitly/) implementation to React hook

### Demo

**[Playground – play with the library in CodeSandbox](https://codesandbox.io/s/react-shorten-url-9t2gc)**

### Similar Projects

- [bitly-field-react](https://github.com/massoprod/bitly-field-react/) by [patrik_masiar](https://github.com/massoprod/)

## How to Install

First, install the library in your project by npm:

```sh

$ npm install react-shorten-url

```

Or Yarn:

```sh

$ yarn add react-shorten-url

```

## Getting Started

### ShortenUrlProvider

#### Config Param Values

| Name        | Type        | Default | Description             |

| ----------- | ----------- | ------- | ----------------------- |

| accessToken | string      | ` `     | Bitly access token      |

| options     | BitlyConfig | `{}`    | Additional Bitly config |

### useShortenUrl

#### Options

| Name | Type   | Default | Description    |

| ---- | ------ | ------- | -------------- |

| url  | string | ` `     | URL to shorten |

#### Returned Values

| Name    | Type      | Description              |

| ------- | --------- | ------------------------ |

| loading | boolean   | Is data loading          |

| error   | Error     | Error shortening URL     |

| data    | BitlyLink | Data returned from Bitly |

## Example

**• Import `ShortenUrlProvider` from library in your React app, wrap main component and set config values:**

```js

// index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { ShortenUrlProvider } from 'react-shorten-url';

import App from './App';

ReactDOM.render(

  

    

  ,

  document.getElementById('root')

);

```

**• Then use `useShortenUrl` Hook:**

```js

// App.js

import React from 'react';

import { useShortenUrl } from 'react-shorten-url';

const App = () => {

  const { loading, error, data } = useShortenUrl('https://example.com/');

  if (loading) return 
Loading...
;


  if (error) return 
Something went wrong
;


  return 
{data.link}
;

};


export default App;

```

## License

This project is licensed under the MIT License © 2020-present Jakub Biesiada