34 |
38 | )}
39 | />
40 | )
41 | ```
42 |
43 | `withUrlState` now takes a config object as its second parameter which allows you to:
44 |
45 | - Provide a custom `history` object in environments which don't support the html5 api.
46 | - Control weather a change of state should result in a `push` or `replace` event for users navigation control.
47 |
48 | - Have more fine grained control over serialisation, such as:
49 |
50 | - Defaults which don't appear in the url
51 | - Alias the parameters passed to your component
52 | - Complex nested objects
53 |
54 | See the `'supports complex serialisation workflows'` test for more.
55 |
--------------------------------------------------------------------------------
/demo-build/index.html:
--------------------------------------------------------------------------------
1 | {urlState.color}
35 |
36 |
37 |
39 |
54 | ))
55 | ```
56 |
57 | Using typescript
58 |
59 | ```typescript jsx
60 | import React from 'react'
61 | import { withUrlState, UrlStateProps } from 'with-url-state'
62 |
63 | type OwnProps = {}
64 | type UrlState = { color: string }
65 |
66 | const enhance = withUrlState
40 |
42 | {props.urlState.color}
41 |
43 |
46 |
49 |
52 |
53 |
70 |
85 | ))
86 | ```
87 |
88 | Using the render-prop component
89 |
90 | ```typescript jsx
91 | import React from 'react'
92 | import { UrlState } from 'with-url-state'
93 |
94 | type OwnProps = {}
95 | type UrlState = { color: string }
96 |
97 | export const UrlForm = (props: OwnProps) => (
98 |
71 |
73 | {props.urlState.color}
72 |
74 |
77 |
80 |
83 |
84 |
102 |
117 | )}
118 | />
119 | )
120 | ```
121 |
122 | ## Motivation
123 |
124 | `with-url-state` automates the query parameter manipulations, simplifying URL sharing for search results, querying data or tracking a visible portion of a map.
125 |
126 | The api provided is:
127 |
128 | - based on [higer-order-components](https://reactjs.org/docs/higher-order-components.html) which makes it composable and testable
129 | - has a render-prop alternative for convenience
130 | - type-safe thanks to [Typescript](https://www.typescriptlang.org/)
131 | - very similar to [Reacts built in state](https://reactjs.org/docs/state-and-lifecycle.html) apis, so converting a component which already manages state is usually as simple as replacing `setState` with `setUrlState`!
132 |
133 |
134 | ## Pollyfill
135 |
136 | For use in IE11 you will need [https://github.com/kumarharsh/custom-event-polyfill](https://github.com/kumarharsh/custom-event-polyfill)
137 | and add `import 'custom-event-polyfill';`
138 | `if (typeof Event !== 'function') { window.Event = CustomEvent; }` to the upper scope of your application.
139 |
--------------------------------------------------------------------------------
/demo/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Map, TileLayer } from 'react-leaflet'
3 | import { Async } from 'with-async'
4 | import { withUrlState, UrlStateProps, UrlState } from 'with-url-state'
5 | import 'leaflet/dist/leaflet.css'
6 | import './App.css'
7 |
8 | type SearchResults = {
9 | count: number
10 | results: Array<{
11 | name: string
12 | height: string
13 | url: string
14 | }>
15 | }
16 |
17 | const characterSearch = (name: string): Promise
103 |
105 | {urlState.color}
104 |
106 |
109 |
112 |
115 |
116 |
26 | setUrlState({ name: e.target.value })}
29 | style={{
30 | paddingBottom: 5,
31 | paddingLeft: 10,
32 | paddingRight: 10,
33 | paddingTop: 5,
34 | marginBottom: 20,
35 | }}
36 | value={urlState.name}
37 | />
38 | characterSearch(urlState.name)}
40 | render={({ error, isLoading, result }) => (
41 |
58 | )}
59 | />
60 | )
61 |
62 | type MapState = { lat: string; lng: string; zoom: string }
63 | export const MapRegion = () => (
64 |
42 | {isLoading &&
55 | )}
56 | />
57 | Loading
} 43 | {result != null && 44 | result.results.map(character => ( 45 |
51 | {character.name}
52 |
53 | ))}
54 |
68 |
84 |
85 | )}
86 | />
87 | )
88 |
89 | type ColorState = { color: string }
90 | const enhance = withUrlState
93 |
108 | ))
109 |
110 | type ExampleState = { example: 'map' | 'form' | 'color' }
111 | export default () => (
112 |
94 |
96 | {props.urlState.color}
95 |
97 |
100 |
103 |
106 |
107 | 
127 |
128 |
129 |
135 |
141 |
147 |
148 | {urlState.example === 'color' && \n setUrlState({ name: e.target.value })}\n style={{\n paddingBottom: 5,\n paddingLeft: 10,\n paddingRight: 10,\n paddingTop: 5,\n marginBottom: 20,\n }}\n value={urlState.name}\n />\n characterSearch(urlState.name)}\n render={({ error, isLoading, result }) => (\n
\n )}\n />\n \n )}\n />\n)\n\ntype MapState = { lat: string; lng: string; zoom: string }\nexport const MapRegion = () => (\n \n {isLoading && \n {character.name}\n
\n ))}\n Loading
}\n {result != null &&\n result.results.map(character => (\n\n \n setUrlState({ lat, lng, zoom })\n }\n zoom={Number(urlState.zoom)}\n style={{\n height: 800,\n width: 600,\n }}\n >\n OpenStreetMap contributors`}\n url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n />\n \n
\n )}\n />\n)\n\ntype ColorState = { color: string }\nconst enhance = withUrlState\n
\n))\n\ntype ExampleState = { example: 'map' | 'form' | 'color' }\nexport default () => (\n \n
\n {props.urlState.color}
\n \n \n \n \n
\n \n setUrlState({ example: 'color' })}\n >\n Color Picker\n \n setUrlState({ example: 'form' })}\n >\n Search form\n \n setUrlState({ example: 'map' })}\n >\n Map\n \n
\n {urlState.example === 'color' &&
32 |
47 | )
48 |
49 | const parseQueryString: Parse{props.urlState.animal}
33 | {props.urlState.color}
34 |
40 |
46 |
351 |
357 | )
358 |
359 | const UrlConnectedControls = withUrlState{props.urlState.max_price}
352 | {props.urlState.min_price}
353 | {props.urlState.page}
354 | {props.urlState.sort}
355 | {props.urlState.q}
356 |