cool-hooks/react-shorten-url

🔗 Bitly implementation to React hook

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

react-shorten-url's Issues

Export types

Update eslint + prettier config (ignore files)

Fix husky

Return function from hook

Add onSuccess, onError callbacks

Add refetch function

Add status return value

Handle error messages (incorrect token/no token)

Update gitignore, npmignore file

Replace useState with useGroupState

Add option to call lazy - enabled prop

Pass token as option in hook (without context)

Suggestion: don't try to fetch link if URL is undefined / blank

I've got a situation where I need to generate a link first before shortening it. What I'm doing is storing the URL via useState, so when that value changes the hook generates the Bit.ly link. Works great except initially my URL is undefined so I get a Bit.ly error that shows up the first time the component loads. Not the end of the world but it's an extra API hit and an error message in the console.

I'd love to be able to conditionally use the hook - basically have it not bother to contact Bit.ly if the provided URL is undefined or a blank string, and only actually make the contact if there's a URL to shorten. I can probably write my own custom wrapper but it'd be cool if react-shorten-url just did it by default.

Otherwise, everything works great. Thanks!

Autopublish (autochangelog)

Check commit name structure

Improve non TS validation

Add shorten function

Add link to demo in README