hook-use-url

npm i hook-use-url

Tiny lib to easily use URL inside ReactJS App with React Router v6

Tested with react-router v6 and ReactJS v18

Overview

import useUrl from 'hook-use-url';

function MyComponent() {
  const url = useUrl();

  // get current url
  url.getUri(); // https://example.com/some-path?a=b&arr=x&arr=y
  // get key's value from URL. Works with arrays too.
  const a = url.get('a'); // b
  const b = url.getAll('a'); // ["b"]
  const arr = url.get('arr'); // ["x", "y"]

  // update a to c & update URL & update browser's history with history.push
  url.set("a", "c").push();
  // update a to c & update URL & update browser's history with history.replace
  url.set("a", "c").replace();
  // update a to c & return new URL without changing it and without changing browser's history
  url.set("a", "c").get();
  // add several values for same variable and update browser's URL & create new history event
  url.add("tag", "tag-1").add("tag", "tag-2").push()
}

API

• You can chain several actions like so: url.set("x1", "foo").set("x2", "foo").push()
• To update browser's URL & history after changes - use .push() or .replace()
• When getting value, if it's not available, undefined is returned.

Function	Description	Sample Output
url.getProtocol()	Get protocol	https
url.getDomain()	Get domain	example.com
url.getDomainWithPort()	Get domain with port	example.com:3000
url.getPort()	Get port	3000
url.getPath()	Get path	/some-path
url.getQuery()	Get query	x1=b
url.getFragment()	Get fragment	foo
url.getUri()	Get full URI with everything	https://example.come/some-path?x1=b#foo
url.getUri()	Get full URI without protocol, domain, or port	/some-path?x1=b#foo
url.get(variable<sub>*</sub>)	Get value of x1 from query url.get("x1")	some-string-value
url.getAll(variable<sub>*</sub>)	Get values of x1 from query. Always returns an array. url.getAll("x1")	[], ["value"], ["a", "b"]
url.removeQuery(variablesToKeep)	Remove query from URI. May pass in optional array of variables to keep: url.removeQuery(["x1"])	url object to chain more methods.
url.removeFragment()	Remove fragment from URI	url object to chain more methods.
url.removePath()	Remove path from URI	url object to chain more methods.
url.setPath(value<sub>*</sub>, doKeepQuery)	Set path & either keep rest of query/fragment or not. Default is not. url.setPath("/about", true)	url object to chain more methods.
url.setFragment(value<sub>*</sub>)	Set new value for fragment. May be any falsy value or string. url.setFragment('title')	url object to chain more methods.
url.set(variable<sub>*</sub>, value<sub>*</sub>)	Set value of variable in url url.set("x1", "y")	url object to chain more methods.
url.add(variable<sub>*</sub>, value<sub>*</sub>)	Add one more value or set 1st value for the variable in url. url.add("tag", "foo")	url object to chain more methods.
url.subtract(variable<sub>*</sub>, value<sub>*</sub>)	Subtract one value from the variable in url. url.subtract("tag", "foo")	url object to chain more methods.
url.delete(variable<sub>*</sub>)	Delete single or multiple values of the variable. url.delete("tag", "foo")	url object to chain more methods.
url.push()	Set URI at browser's address input and push history event to browser's history	url object to chain more methods.
url.replace()	Set URI at browser's address input and replace current history event with new at browser's history	url object to chain more methods.