urltron
Stringify and parse json for url.
Works wonderfully for SPA apps that want to store state in url. Read via location.search and location.hash. Navigate with <a href="...">, history.pushState and location.assign. Can be used with react-router's <Link to={...} and useLocation/useHistory hooks.
Why use urltron?
- 0 dependencies
- Tiny (~1kb)
- Fast
- Looks like good ol' query params
- Written in Typescript. Comes with typings when installed.
- Works on all browsers and Node.js
Usage
Same api as built-in JSON.stringify and JSON.parse.
import urltron from 'urltron';
urltron.stringify({limit: 10, offset: 20, query: 'hello'});
urltron.parse('limit=10&offset=20&query=hello');Design
- A flat object looks exactly like query paramters e.g
?k1=v&k2=v. - Supports all valid json types (null, boolean, number, string, object and array).
- Readable and intuitive output. Objects as
(a=1&b=2&c=3)and arrays in@(a,b,c) - Shorter and readable output compared to
encodeURIComponent(JSON.stringify(val))
Examples
| urltron | json |
|---|---|
hello=world+tour&limit=2&sort |
{"hello":"world tour","limit":2,"sort":true} |
query= |
{"query":""} |
num=1.23 |
{"num":1.23} |
yep=t |
{"yep":true} |
nah=f |
{"nah":false} |
nada=n |
{"nada":null} |
nStr=~n |
{"nStr":"n"} |
numStr=~123 |
{"numStr":"123"} |
arr=@(1,2,3) |
{"arr":[1,2,3]} |
jraphql=(id&name&books=(id&name)) |
{"jraphql":{"id":true,"name":true,"books":{"id":true,"name":true}} |
@(@(1,2,3),@(4,5,6),@(7,8,9),0) |
[[1,2,3],[4,5,6],[7,8,9],0] |
@(~,hello,t,f,n,1,(a=(b=c))) |
["","hello",true,false,null,1,{"a":{"b":"c"}}] |