react-shorten-url

About

Bitly implementation to React hook

Demo

Playground – play with the library in CodeSandbox

Similar Projects

• bitly-field-react by patrik_masiar

How to Install

First, install the library in your project by npm:

$ npm install react-shorten-url

Or Yarn:

$ 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:

// 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;

License

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