mk-router

Overview

mk-router is a lightweight React library designed for efficient and intuitive routing in your React applications. It offers simple yet powerful APIs to define routes, handle navigation, and manage dynamic route parameters seamlessly.

Features

• Simple & Flexible: Minimalistic design with an easy-to-use API.
• Dynamic Routing: Includes support for dynamic route parameters.
• React-First Approach: Built specifically for React with a declarative setup.
• No External Dependencies: Only requires React as a dependency.
• Lightweight: Keeps your app performant by minimizing overhead.

Installation

Install mk-router using npm:

npm install mk-router

Or using yarn:

yarn add mk-router

Getting Started

Here’s a quick example to demonstrate how mk-router can be used in your project:

import React from 'react';
import { Router, Route } from 'mk-router';

const Home = () => <h1>Welcome to the Home Page</h1>;
const About = () => <h1>About Us</h1>;
const Profile = ({ params }: { params: { id: string } }) => <h1>Profile ID: {params.id}</h1>;

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/profile/:id" component={Profile} />
    </Router>
  );
}

export default App;

API

<Router>

The Router component acts as the root context provider for your application's routes. You must wrap all Route components inside the Router for routing to function properly.

<Router>{/* Define your routes here */}</Router>

<Route>

The Route component is used to define individual routes for your application.

| Prop | Type | Description | | ----------- | --------------------- | ------------------------------------------------ | | path | string | The URL path that this route matches. | | component | React.ComponentType | The component rendered when the path is matched. |

<Route path="/example" component={ExampleComponent} />

Dynamic Route Parameters

mk-router supports dynamic route parameters using the :paramName syntax in the path. These parameters are extracted and passed as a params prop to the associated component.

For instance:

<Route path="/profile/:id" component={Profile} />

In this example, if the route matches /profile/123, the Profile component will receive { id: '123' } as its params prop.

const Profile = ({ params }: { params: { id: string } }) => {
  return <h1>Profile ID: {params.id}</h1>;
};

Contribution

We welcome contributions to mk-router. To contribute:

1. Fork the repository.
2. Create a new branch for your changes.
3. Submit a pull request describing your updates.

Feel free to open issues or suggestions to improve the library further!

License

This project is open-source and is licensed under the MIT License.

Simplify your React routing with mk-router today and focus on what matters—building great applications!