Skip to content

Commit 5f52da7

Browse files
Dean177Dean177
committed
Add example, update Readme.md to match API. Update dependency versions/.
1 parent 850a99d commit 5f52da7

32 files changed

+7331
-508
lines changed

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
coverage
2+
example
23
node_modules
34
yarn-error.log
45
yarn.lock

‎Readme.md‎

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,40 +8,70 @@ Lifts state out of a react component and into the url
88

99
## Usage
1010

11+
Check out the [demo](https://dean177.github.io/with-url-state/) and the [example/](https://github.com/Dean177/with-url-state/tree/master/example) directory
12+
13+
Using javascript
14+
1115
```javascript
16+
import { createBrowserHistory } from 'history';
1217
import React from 'react';
1318
import { withUrlState } from 'with-url-state';
1419

15-
export const UrlForm = ({ setUrlState, urlState }) =>
16-
<div>
17-
<div className="currentState">{urlState.color}</div>
18-
<button className="Green" onClick={() => setUrlState({ color: 'Green' })}>
19-
Green
20-
</button>
21-
<button className="Red" onClick={() => setUrlState({ color: 'Red' })}>
22-
Red
23-
</button>
24-
</div>;
25-
26-
export default withUrlState(UrlForm)
20+
const history = createBrowserHistory();
21+
22+
export const UrlForm = (props: OwnProps & UrlStateProps<LiftedState>) => (
23+
<div className="UrlForm">
24+
<div className="current-state" style={{ backgroundColor: props.urlState.color}}>
25+
<div>{props.urlState.color}</div>
26+
</div>
27+
<div className="color-buttons">
28+
<button className="Red" onClick={() => props.setUrlState({ color: 'red' })}>
29+
Red
30+
</button>
31+
<button className="Green" onClick={() => props.setUrlState({ color: 'green' })}>
32+
Green
33+
</button>
34+
<button className="Blue" onClick={() => props.setUrlState({ color: 'blue' })}>
35+
Blue
36+
</button>
37+
</div>
38+
</div>
39+
);
40+
41+
export default withUrlState<OwnProps, LiftedState>(history, { color: 'blue' })(UrlForm);
2742
```
2843

44+
Using typescript
45+
2946
```typescript
47+
import { createBrowserHistory } from 'history';
3048
import * as React from 'react';
3149
import { withUrlState, UrlStateProps } from 'with-url-state';
3250

51+
const history = createBrowserHistory();
52+
53+
type OwnProps = {};
3354
type LiftedState = { color: string };
3455

35-
export const UrlForm = (props: UrlStateProps<LiftedState>) =>
36-
<div>
37-
<div className="currentState">{props.urlState.color}</div>
38-
<button className="Green" onClick={() => props.setUrlState({ color: 'Green' })}>
39-
Green
40-
</button>
41-
<button className="Red"onClick={() => props.setUrlState({ color: 'Red' })}>
42-
Red
43-
</button>
44-
</div>;
45-
46-
export default withUrlState(UrlForm)
56+
export const UrlForm = (props: OwnProps & UrlStateProps<LiftedState>) => (
57+
<div className="UrlForm">
58+
<div className="current-state" style={{ backgroundColor: props.urlState.color}}>
59+
<div>{props.urlState.color}</div>
60+
</div>
61+
<div className="color-buttons">
62+
<button className="Red" onClick={() => props.setUrlState({ color: 'red' })}>
63+
Red
64+
</button>
65+
<button className="Green" onClick={() => props.setUrlState({ color: 'green' })}>
66+
Green
67+
</button>
68+
<button className="Blue" onClick={() => props.setUrlState({ color: 'blue' })}>
69+
Blue
70+
</button>
71+
</div>
72+
</div>
73+
);
74+
75+
export default withUrlState<OwnProps, LiftedState>(history, { color: 'blue' })(UrlForm);
76+
4777
```

‎docs/asset-manifest.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"main.css": "static/css/main.15d1249f.css",
3+
"main.css.map": "static/css/main.15d1249f.css.map",
4+
"main.js": "static/js/main.5b368bee.js",
5+
"main.js.map": "static/js/main.5b368bee.js.map"
6+
}

‎docs/favicon.ico‎

3.78 KB
Binary file not shown.

‎docs/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>with-url-state</title><link href="/static/css/main.15d1249f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.5b368bee.js"></script></body></html>

‎docs/manifest.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎docs/service-worker.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/css/main.15d1249f.css‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/css/main.15d1249f.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/main.5b368bee.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)