Update the changelog, some slight refactoring before 2.0.

Author: Dean177

CHANGELOG.md

@@ -1,32 +1,54 @@
 ## 2.0.0
 
 ### Breaking changes
- 
+
 -The html5 history api is now used by default. This means that you no longer need to provide a `history` object has the first parameter.
 In practice usually means you will need to drop the first parameter to `withUrlState`, and usage will remain the same.
 
 #### Before
 
-```typescript jsx
-const enhance = withUrlState(history, () => ({ color: "blue" }))
+```js
+const enhance = withUrlState(history, () => ({ color: 'blue' }))
 ```
 
-
 #### After
 
-```typescript jsx
-const enhance = withUrlState(() => ({ color: "blue" }))
+```js
+const enhance = withUrlState(() => ({ color: 'blue' }))
 ```
 
-
 ### New features
 
+A new render-prop based API is also available:
+
+Now you can do:
+
+```js jsx
+import { UrlState } from 'with-url-state'
+
+const RenderProp = (props: OwnProps) => (
+  <UrlState
+    initialState={{ color: 'purple' }}
+    render={({ urlState, setUrlState }: UrlStateProps<LiftedState>) => (
+      <div>
+        <div>{urlState.color}</div>
+        <button onClick={() => setUrlState({ color: 'green' })}>Green</button>
+        <button onClick={() => props.setUrlState({ color: 'purple' })}>Purple</button>
+      </div>
+    )}
+  />
+)
+```
+
 `withUrlState` now takes a config object as its second parameter which allows you to:
 
 - Provide a custom `history` object in environments which don't support the html5 api.
-- Have more fine grained control over serialisation, such as:
- - Defaults which don't appear in the url
- - Alias the parameters passed to your component
- - Complex nested objects
- See the `'supports complex serialisation workflows'` test for more.
 - Control weather a change of state should result in a `push` or `replace` event for users navigation control.
+
+- Have more fine grained control over serialisation, such as:
+
+  - Defaults which don't appear in the url
+  - Alias the parameters passed to your component
+  - Complex nested objects
+
+  See the `'supports complex serialisation workflows'` test for more.

Readme.md

@@ -13,29 +13,29 @@ This package allows applications to retrieve the state from a react component an
 
 ## Installation
 
-To install with npm use 
+To install with npm use
 
 `npm install with-url-state --save`
 
-To install with yarn use 
+To install with yarn use
 
 `yarn add with-url-state`
 
 ## Usage
 
-Check out the [demo](https://dean177.github.io/with-url-state/), the [example/](https://github.com/Dean177/with-url-state/tree/master/example) directory, or play with it in [CodeSandbox](https://codesandbox.io/s/21z35p6pjp).
+Play with it in [CodeSandbox](https://codesandbox.io/s/18x4l87yx7) or check out the the [example/](https://github.com/Dean177/with-url-state/tree/master/example)
 
 Using javascript
 
 ```javascript
-import React from 'react';
+import React from 'react'
 import { withUrlState } from 'with-url-state'
 
-const enhance = withUrlState((props) => ({ color: 'blue' }))
+const enhance = withUrlState(props => ({ color: 'blue' }))
 
-export const UrlForm = enhance((props) => (
+export const UrlForm = enhance(props => (
   <div className="UrlForm">
-    <div className="current-state" style={{ backgroundColor: props.urlState.color}}>
+    <div className="current-state" style={{ backgroundColor: props.urlState.color }}>
       <div>{props.urlState.color}</div>
     </div>
     <div className="color-buttons">
@@ -66,7 +66,7 @@ const enhance = withUrlState<OwnProps, UrlState>((prop: OwnProps) => ({ color: '
 
 export const UrlForm = enhance((props: OwnProps & UrlStateProps<UrlState>) => (
   <div className="UrlForm">
-    <div className="current-state" style={{ backgroundColor: props.urlState.color}}>
+    <div className="current-state" style={{ backgroundColor: props.urlState.color }}>
       <div>{props.urlState.color}</div>
     </div>
     <div className="color-buttons">
@@ -82,11 +82,9 @@ export const UrlForm = enhance((props: OwnProps & UrlStateProps<UrlState>) => (
     </div>
   </div>
 ))
-
 ```
 
-Using the renderprop component 
-
+Using the renderprop component
 
 ```typescript jsx
 import React from 'react'
@@ -95,33 +93,38 @@ import { UrlState } from 'with-url-state'
 type OwnProps = {}
 type UrlState = { color: string }
 
-export const UrlForm = (props: OwnProps) => 
-  <UrlState initialState={{ color: 'green' }} render={({ setUrlState, urlState }) => 
-    <div className="UrlForm">
-      <div className="current-state" style={{ backgroundColor: urlState.color}}>
-        <div>{urlState.color}</div>
+export const UrlForm = (props: OwnProps) => (
+  <UrlState
+    initialState={{ color: 'green' }}
+    render={({ setUrlState, urlState }) => (
+      <div className="UrlForm">
+        <div className="current-state" style={{ backgroundColor: urlState.color }}>
+          <div>{urlState.color}</div>
+        </div>
+        <div className="color-buttons">
+          <button className="Red" onClick={() => setUrlState({ color: 'red' })}>
+            Red
+          </button>
+          <button className="Green" onClick={() => setUrlState({ color: 'green' })}>
+            Green
+          </button>
+          <button className="Blue" onClick={() => setUrlState({ color: 'blue' })}>
+            Blue
+          </button>
+        </div>
       </div>
-      <div className="color-buttons">
-        <button className="Red" onClick={() => setUrlState({ color: 'red' })}>
-          Red
-        </button>
-        <button className="Green" onClick={() => setUrlState({ color: 'green' })}>
-          Green
-        </button>
-        <button className="Blue" onClick={() => setUrlState({ color: 'blue' })}>
-          Blue
-        </button>
-      </div>
-    </div>
-  } />
+    )}
+  />
+)
 ```
 
 ## Motivation
 
 `with-url-state` automates the query parameter manipulations, simplifying URL sharing for search results, querying data or tracking a visible portion of a map.
 
 The api provided is:
+
 - based on [higer-order-components](https://reactjs.org/docs/higher-order-components.html) which makes it composable and testable
 - has a render-prop alternative for convenience
-- type-safe thanks to [Typescript](https://www.typescriptlang.org/)   
+- type-safe thanks to [Typescript](https://www.typescriptlang.org/)
 - 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`!

docs/asset-manifest.json

@@ -31,26 +31,25 @@ export const UrlForm = (props: OwnProps & UrlStateProps<LiftedState>) => (
 
 const Html = withUrlState<LiftedState, OwnProps>(() => ({ color: 'blue' }))(UrlForm)
 
-const history = createBrowserHistory()
-
-const Npm = withUrlState<LiftedState, OwnProps>(() => ({ color: 'red' }), { history })(UrlForm)
-
-const CustomSerialisation = withUrlState<LiftedState, OwnProps>(() => ({ color: 'green' }), {
-  serialisation: {
-    parse: (search: string) => ({
-      color:
-        search === '?c=blue'
-          ? 'blue'
-          : search === '?c=green'
-            ? 'green'
-            : search === '?c=red'
-              ? 'red'
-              : 'blue',
-    }),
-    stringify: ({ color }: Partial<LiftedState>) =>
-      color === 'blue' ? '?c=blue' : color === 'green' ? '?c=green' : '?c=red',
+const CustomSerialisation = withUrlState<LiftedState, OwnProps>(
+  () => ({ color: 'green' }),
+  {
+    serialisation: {
+      parse: (search: string) => ({
+        color:
+          search === '?c=blue'
+            ? 'blue'
+            : search === '?c=green'
+              ? 'green'
+              : search === '?c=red'
+                ? 'red'
+                : 'blue',
+      }),
+      stringify: ({ color }: Partial<LiftedState>) =>
+        color === 'blue' ? '?c=blue' : color === 'green' ? '?c=green' : '?c=red',
+    },
   },
-})(UrlForm)
+)(UrlForm)
 
 const RenderProp = (props: OwnProps) => (
   <UrlState
@@ -64,14 +63,12 @@ export default () => (
   <div className="App">
     <div className="side-nav">
       <Link to="/html5">Html5 History</Link>
-      <Link to="/npm">Npm History</Link>
       <Link to="/custom-serialisation">Custom serialisation</Link>
       <Link to="/render-prop">Render prop</Link>
     </div>
     <div className="content">
       <Router>
-        <Html default={true} path="/html5" />
-        <Npm path="/npm" />
+        <Html default={true} path="/" />
         <CustomSerialisation path="/custom-serialisation" />
         <RenderProp path="/render-prop" />
       </Router>