Skip to content

README.md

Latest commit

 

History

History
113 lines (78 loc) · 2.89 KB

README.md

File metadata and controls

113 lines (78 loc) · 2.89 KB

🐯 Tiger Router 🐯

Licencia ISC Versión

Web

2025 Update - v2.0.0

Tiger Router is a minimalist routing library for React, now fully rewritten in TypeScript with complete type definitions. It provides a lightweight, framework-agnostic core with modern React bindings.

Unlike heavyweight alternatives, Tiger Router focuses on simplicity and essential routing features without the bloat.

Features

  • ✅ TypeScript First - Full type safety with generated .d.ts files
  • ✅ Minimalist Core - Framework-agnostic history and route matching
  • ✅ Modern React Hooks - useLocation, useNavigate, useParams, useRouteMatch
  • ✅ Tiny Bundle - Keep your app lightweight
  • ✅ ESM & CJS - Works with modern and legacy build systems

Installation

npm install tiger-router
# or
yarn add tiger-router
# or
pnpm install tiger-router

Quick Start

import { Router, Route, Link, useParams } from "tiger-router";

function User() {
  const params = useParams();
  return <div>User ID: {params.id}</div>;
}

export function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/users/123">User 123</Link>
      </nav>

      <Route path="/" element={<div>Home</div>} />
      <Route path="/users/:id" element={<User />} />
    </Router>
  );
}

API Reference

<Router>

The main router component that manages navigation state.

Props:

  • mode?: 'history' | 'hash' - Routing mode (default: 'history')
  • children: ReactNode - Child routes and components

<Route>

Renders a component when the path matches.

Props:

  • path: string - URL pattern (supports :param syntax)
  • element?: ReactNode - Component to render on match
  • children?: ReactNode - Alternative to element

<Link>

Navigation component that prevents full page reloads.

Props:

  • to: string - Target path
  • children: ReactNode - Link content
  • All standard <a> attributes

Hooks

useLocation()

Returns the current location path.

useNavigate()

Returns a function to programmatically navigate.

useParams()

Returns route parameters as an object.

useRouteMatch(path: string)

Returns true if the given path matches the current location.

Philosophy

Tiger Router is intentionally minimal. It doesn't include:

  • Data loaders
  • Complex nested routing
  • Route guards
  • Lazy loading utilities

If you need these features, consider React Router. If you want simplicity, Tiger Router is for you. 🐯

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

Cheers 🍻 !!!