WebViewKit

A modern React library for building stack-based navigation in WebView applications, providing smooth transitions and native-like navigation experience.

Features

• 🚀 Stack-based Navigation: Native-like navigation with push/pop transitions
• 🎨 Smooth Animations: GSAP-powered animations for fluid page transitions
• 📱 Mobile-First: Designed specifically for WebView and mobile applications
• 🔧 TypeScript Support: Full TypeScript support with comprehensive type definitions
• 🎯 Flexible: Customizable animations, layouts, and navigation behavior

Installation

npm install @webviewkit
# or
yarn add @webviewkit
# or
pnpm add @webviewkit

Quick Start

import React from "react";
import { StackRouterProvider } from "@webviewkit";

function App() {
  return (
    <StackRouterProvider
      maxWidth="600px"
      Activities={[
        {
          path: "/",
          element: <HomePage />,
        },
        {
          path: "/about",
          element: <AboutPage />,
        },
      ]}
      initialActivity={{ path: "/", element: <HomePage /> }}
    />
  );
}

Usage

Basic Navigation

import { useStackRouter } from "@webviewkit/core";

function HomePage() {
  const { push, back } = useStackRouter();

  return (
    <div>
      <h1>Home</h1>
      <button onClick={() => push("/about")}>Go to About</button>
      <button onClick={back}>Back</button>
    </div>
  );
}

History Management

import { history } from "@webviewkit";

// Navigate to a new page
await history.push("/new-page", { data: "some data" });

// Replace current page
await history.replace("/replacement-page", { data: "replacement data" });

// Go back
await history.back();

// Go forward
await history.forward();

API Reference

StackRouterProvider Props

| Prop | Type | Default | Description | | ----------------- | ------------------------------------------------- | --------- | ------------------------------------- | | maxWidth | string | "600px" | Maximum width of the layout container | | isShowHeader | boolean | true | Whether to show the header | | Activities | Array<{path: string, element: React.ReactNode}> | [] | Array of available routes | | initialActivity | {path: string, element: React.ReactNode} | - | Initial route to display |

useStackRouter Hook

Returns an object with navigation methods:

• currentPath: Current active path
• currentState: Current history state
• push(path, data?): Navigate to a new page
• replace(path, data?): Replace current page
• back(): Go back to previous page
• forward(): Go forward to next page

History API

• history.push(path, data?): Add new history entry
• history.replace(path, data?): Replace current history entry
• history.back(): Go back to previous entry
• history.forward(): Go forward to next entry
• history.go(delta): Go to specific history entry
• history.getCurrentState(): Get current history state
• history.addListener(listener): Add history change listener

Examples

See the packages/browser directory for complete examples.

Development

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Run linting
pnpm lint

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.