burla - better url abstraction
A URL manipulation library using the History API:
// https://example.com/users; urlpath = '/hello/world'; // No refresh here// https://example.com/hello/world
Can change queries easily even when there's already a search query:
// https://example.com/?language=es; // Change a single query while maintaining the rest:urlquerytext = 'hello';// https://example.com/?language=es&text=hello // Works with query arrays:urlquerylanguage = 'en' 'es';// https://example.com/?language[]=en&language[]=es&text=hello // Remove a single query:delete urlquerylanguage;// https://example.com/?text=hello
The default export will manipulate the window.location
, effectively changing the current browser URL and adding a new page to the history. You can also manipulate url strings without changing the browser.
API
.path
(or .pathname
)
Change the full path in the browser:
// Path - redirect to the url without refresh// https://example.com/users; urlpath = '/hello/world';// https://example.com/hello/world
Redirect a React Router page without worries:
; { const login = { // do something fancy here urlpath = '/user'; }; return <div onClick=login>Login!</div>;};
.query
Modify parameters from the query string independently:
// https://example.com/?code=123; const code = urlquerycode;delete urlquerycode;// https://example.com/ urlquerylogged = true;// https://example.com/?logged=true console;// string
They are always casted to strings and url entities are escapped, as standard with search strings.
If you want to modify several parameters at once without triggering different history events, you can call .query = { ... }
with the parameters. This will accept all the new parameters, ignoring previous ones:
// https://example.com/?code=a1b2; // To maintain the previous parameters with the function, add them manually:urlquery = ...urlquery user: 'franciscop' ;// https://example.com/?code=a1b2&user=franciscop // Otherwise the previous parameters will be removed:urlquery = logged: true ;// https://example.com/?logged=true
.hash
Read the hash (without the #
symbol) and modify it:
// https://example.com/#better-section; urlhash = 'abc';// https://example.com/#abc
URL()
This can be imported in two ways:
; console; // Method 1console; // Method 2
You can create and manipulate URLs without affecting the window.location
:
; // Create a new url that is detached from `window.location`:const url = ;urlquerycode = '123456'; // <- no redirectsconsole;// https://example.com/?code=123456