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

1npm install @webviewkit
2# or
3yarn add @webviewkit
4# or
5pnpm add @webviewkit

Quick Start

1import React from "react";
2import { StackRouterProvider } from "@webviewkit";
3
4function App() {
5  return (
6    <StackRouterProvider
7      maxWidth="600px"
8      Activities={[
9        {
10          path: "/",
11          element: <HomePage />,
12        },
13        {
14          path: "/about",
15          element: <AboutPage />,
16        },
17      ]}
18      initialActivity={{ path: "/", element: <HomePage /> }}
19    />
20  );
21}

Usage

Basic Navigation

1import { useStackRouter } from "@webviewkit/core";
2
3function HomePage() {
4  const { push, back } = useStackRouter();
5
6  return (
7    <div>
8      <h1>Home</h1>
9      <button onClick={() => push("/about")}>Go to About</button>
10      <button onClick={back}>Back</button>
11    </div>
12  );
13}

History Management

1import { history } from "@webviewkit";
2
3// Navigate to a new page
4await history.push("/new-page", { data: "some data" });
5
6// Replace current page
7await history.replace("/replacement-page", { data: "replacement data" });
8
9// Go back
10await history.back();
11
12// Go forward
13await 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

1# Install dependencies
2pnpm install
3
4# Build all packages
5pnpm build
6
7# Run tests
8pnpm test
9
10# Run linting
11pnpm 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.