Socket
Socket
Sign inDemoInstall

use-history-state

Package Overview
Dependencies
6
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-history-state

`use-history-state` is replacement for `useState` that stores the state within the history state.


Version published
Maintainers
1
Weekly downloads
54
decreased by-55.74%

Weekly downloads

Readme

Source

useHistoryState

useHistoryState is replacement for useState that stores the state within the history state.

The difference between useHistoryState and useState is that every changes in your state will be stored within the navigator history. And so, if you go back in your history, you will change the inner value of the state.

How to use

import React, { Fragment } from "react";
import useHistoryState from "use-history-state";

const Component = () => {
  // const [state, setState] = useHistoryState(initialValue, keyInHistoryState);
  const [name, setName] = useHistoryState("", "name");

  const names = ["John", "Susan", "Hugo", "Jade", "Mike", "Aurora"];

  return (
    <Fragment>
      <h1>{name}</h1>
      {names.map(n => (
        <button key={n} type="button" onClick={() => setName(n)} />
      ))}
    </Fragment>
  );
};

useHistoryState

function useHistoryState<State>(initialValue: State | () => State, key: string) {}

If there is already the specified key within the history's state, the initial value will be set to this value. Otherwise, it will you initialValue set as argument.

setState

function setState<State>(newState: State | State => void, replace?: boolean) {}

When you use the setState function, you can specify a second argument: replace.

  • If replace is set to true, under the hood setState will use history.replaceState and so, if you want to go back to the previous page, you won't reach the replaced states.
  • If replace is set to false, under the hood setState will use history.pushState, which means that every changes will be available in you history.

By default, replace is set to false

Installation

npm

npm i --save use-history-state
import useHistoryState from "use-history-state"; // esm
const useHistoryState = require("use-history-state"); // cjs

yarn

yarn add use-history-state
import useHistoryState from "use-history-state"; // esm
const useHistoryState = require("use-history-state"); // cjs

umd

<script src="https://unpkg.com/use-history-state@x.y.z/dist/useHistoryState.umd.js">
const useHistoryState = window["use-history-state"];

Keywords

FAQs

Last updated on 29 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc