Bitly implementation to React hook
Playground – play with the library in CodeSandbox
First, install the library in your project by npm:
$ npm install react-shorten-urlOr Yarn:
$ yarn add react-shorten-url| Name | Type | Default | Description |
|---|---|---|---|
| accessToken | string | |
Bitly access token |
| options | BitlyConfig | {} |
Additional Bitly config |
| Name | Type | Default | Description |
|---|---|---|---|
| url | string | |
URL to shorten |
| Name | Type | Description |
|---|---|---|
| loading | boolean | Is data loading |
| error | Error | Error shortening URL |
| data | BitlyLink | Data returned from Bitly |
• Import ShortenUrlProvider from library in your React app, wrap main component and set config values:
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { ShortenUrlProvider } from 'react-shorten-url';
import App from './App';
ReactDOM.render(
<ShortenUrlProvider config={{ accessToken: 'bitly_access_token' }}>
<App />
</ShortenUrlProvider>,
document.getElementById('root')
);• Then use useShortenUrl Hook:
// 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 <p>Loading...</p>;
if (error) return <p>Something went wrong</p>;
return <h1>{data.link}</h1>;
};
export default App;This project is licensed under the MIT License © 2020-present Jakub Biesiada