Skip to main content

@ttoss/react-hooks

📚 About​

@ttoss/react-hooks is an easy way to use Utility Hooks in your React application.

🚀 Getting Started​

Installing @ttoss/react-hooks​

$ yarn add @ttoss/react-hooks
# or
$ npm install @ttoss/react-hooks

📄 Usage Examples​

useScript​

The useScript hook is used to load external scripts into your React component.

import React from 'react';
import { useScript } from '@ttoss/react-hooks';

export const ComponentWithScript = () => {
  const url = 'https://your-domain.com/bundle-api.js';
  const { status } = useScript(url);

  return <div>{status === 'ready' ? 'Script loaded' : 'Loading'}</div>;
};

useDebounce​

The useDebounce hook is used to delay the update of a value for a specific amount of time.

import React, { useState } from 'react';
import { useDebounce } from '@ttoss/react-hooks';

export const DebouncedInputComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue, 500);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="Type to search..."
    />
  );
};

📘 Types​

useScript​

type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';

const useScript: (src: string) => {
  status: ScriptStatus;
};

useDebounce​

const useDebounce: <T>(value: T, delay?: number) => T;