# LandingSwitcher

**LandingSwitcher** is a simple React component that allows developers to seamlessly switch between a landing page and a home page, with optional support for additional routes like an About page or a Contact page. The component is easy to integrate and comes with built-in customizable options for content.

## Installation

Install the package via npm:

```bash
npm install landingswitcher

Usage

Here's an example of how to use the LandingSwitcher component in a React project:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import PageSwitcher from "landingswitcher"; // Import the package
import LandingPage from "./LandingPage"; // Your custom LandingPage component
import HomePage from "./HomePage"; // Your custom HomePage component
import AboutPage from "./AboutUs"; // Your custom AboutUs component
import ContactPage from "./ContactUs"; // Your custom ContactUs component

const App = () => {
  return (
    <Router>
      <Routes>
        <Route
          exact
          path="/"
          element={
            <PageSwitcher LandingPage={LandingPage} HomePage={HomePage} />
          }
        />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
    </Router>
  );
};

export default App;

LandingPage Example

// LandingPage.jsx
import React from "react";

const LandingPage = ({ handleClick }) => {
  return (
    <div>
      <h1>Welcome to My Custom Landing Page</h1>
      <p>This is some introduction text for the landing page.</p>
      <button onClick={handleClick}>Go to Home Page</button>
    </div>
  );
};

export default LandingPage;

HomePage Example

// HomePage.jsx
import React from "react";

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <p>This is where your main content will be displayed.</p>
    </div>
  );
};

export default HomePage;

Props

The PageSwitcher component accepts the following props:

• LandingPage: The component to be rendered as the landing page. (Required)
• HomePage: The component to be rendered as the home page. (Required)

Customization

You can customize your landing and home pages by passing in your own components. These components can contain any structure, style, or functionality that fits your needs.

Example of Adding Custom Routes

You can easily add additional routes (e.g., About, Contact pages) by using the react-router-dom library, as shown in the example above.

Development

To build the package from the source, run the following command:

npm run build

License

This package is licensed under the ISC License.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request with any enhancements or bug fixes.

Author

Man Chopda
Email: [[email protected]]