ilikepizza2 / react-savestate Goto Github PK

REACT-SAVESTATE

Description: react-savestate is a lightweight npm package designed as a router for React applications which preserves states between route changes. It provides alternative routing functionalities and components to streamline navigation within React-based web applications.

Installation: You can install react-savestate via npm by running the following command:

 npm install react-savestate

Usage:

// import the functions
import { Route, getState, Link } from 'react-savestate';

// Define routes using the Route component
<Route path='/' component={LandingPage} />
<Route path='/Contact' component={Contact} />

// Use the Link component for navigation without page refresh
<Link href='/' state={{ data: "from HomePage", data2: "something else" }}>Go to contact</Link>

// Retrieve saved state using getState function
console.log(getState());

Components:

• Route: An alternative route element for routing between pages in a React application. No need to wrap them in any parent wrapper.
• Link: A replacement for <a> tag which facilitates navigation without triggering a page refresh. It also supports passing a state object to preserve data across routes without using URL parameters.
• getState: Function to retrieve the saved state, if any, within the application.

Note:

• Ensure that the state passed to Link is serializable to avoid any issues with preservation and retrieval.
• Utilize Route and Link components as replacements for traditional routing and navigation elements within your React application for improved performance and user experience.

Contributing: Contributions to react-savestate are welcome! Feel free to submit issues or pull requests on the GitHub repository: react-savestate GitHub Repository

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