ShinyURL Input Box

A reusable React component for generating ShinyURLs.

Installation

npm install shiny-url-input-box

Or use as a local package:

{
  "dependencies": {
    "shiny-url-input-box": "file:../package"
  }
}

Usage

import { ShinyUrlInput } from 'shiny-url-input-box';

function App() {
  const handleSuccess = (data) => {
    console.log('Short URL created:', data);
  };

  const handleError = (error) => {
    console.error('Error:', error);
  };

  // With explicit API URL
  return (
    <ShinyUrlInput
      apiBaseUrl="https://shinyurl-backend.onrender.com"
      onSuccess={handleSuccess}
      onError={handleError}
      label="Enter URL to shorten"
      buttonText="Shorten URL"
    />
  );

  // Or without apiBaseUrl (uses same origin automatically)
  return (
    <ShinyUrlInput
      onSuccess={handleSuccess}
      onError={handleError}
    />
  );
}

Props

• apiBaseUrl (string, optional) - Base URL of the backend API. If not provided, defaults to window.location.origin (same origin as the frontend)
• onSuccess (function, optional) - Callback called when URL is successfully shortened
• onError (function, optional) - Callback called when an error occurs
• label (string, optional) - Label text above input (default: "Enter URL to shorten")
• buttonText (string, optional) - Submit button text (default: "Shorten URL")
• className (string, optional) - Additional CSS class for the wrapper

Programmatic Usage

You can also use the exported shortenUrl function to shorten URLs programmatically without using the UI component.

import { shortenUrl } from 'shiny-url-input-box';

// Inside an async function
try {
  const result = await shortenUrl(
    'https://example.com/long/url',
    'YOUR_API_KEY',
    { apiBaseUrl: 'https://shinyurl-backend.onrender.com' } // Optional
  );

  if (result.success) {
    console.log('Short URL:', result.data.shortUrl);
  } else {
    console.error('Error:', result.message);
  }
} catch (error) {
  console.error('Failed to shorten URL:', error);
}

shortenUrl Arguments

1. url (string): The URL to shorten.
2. apiKey (string): Your API key.
3. options (object, optional):
   • apiBaseUrl (string): Base URL of the backend API. Defaults to window origin or shinyurl-backend.onrender.com.

Return Value

Returns a Promise that resolves to:

interface ShortenResponse {
  success: boolean;
  data?: {
    originalUrl: string;
    shortUrl: string;
    shortCode: string;
  };
  message?: string;
}