Skip to content

Commit

Permalink
feat($onError): add onError prop
Browse files Browse the repository at this point in the history
  • Loading branch information
faceyspacey committed Aug 4, 2017
1 parent a68488f commit 8902849
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 1 deletion.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,7 @@ MyUniversalComponent.doSomething()
- `error: new Error`
- `onBefore`: `({ isMount, isSync, isServer }) => doSomething(isMount, isSync, isServer)`
- `onAfter`: `({ isMount, isSync, isServer }, Component) => doSomething(Component, isMount, etc)`
- `onError`: `error => handleError(error)`
### `isLoading` + `error`:
You can pass `isLoading` and `error` props to the resulting component returned from the `universal` HoC. This has the convenient benefit of allowing you to continue to show the ***same*** `loading` component (or trigger the ***same*** `error` component) that is shown while your async component loads *AND* while any data-fetching may be occuring in a parent HoC. That means less jank from unnecessary re-renders, and less work (DRY).
Expand Down Expand Up @@ -308,6 +309,8 @@ const MyComponent = ({ dispatch, isLoading }) =>
> Keep in mind if you call `setState` within these callbacks and they are called during `componentWillMount`, the `state` change will have no effect for that render. This is because the component is already in the middle of being rendered within the parent on which `this.setState` will be called. You can use *Redux* to call `dispatch` and that will affect child components. However, it's best to use this primarily for setting up and tearing down loading state on the client, and nothing more. If you chose to use them on the server, make sure the client renders the same thing on first load or you will have checksum mismatches.
- `onError` is similar to the `onError` static option, except it operates at the component level. Therefore you can bind to `this` of the parent component and call `this.setState()` or `this.props.dispatch()`. Again, it's use case is for when you want to show error information elsewhere in the UI besides just the place that the universal component would otherwise render :)
## Universal Demo
Expand Down
4 changes: 3 additions & 1 deletion src/flowTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,14 @@ export type State = { error?: any, Component?: ?any }
type Info = { isMount: boolean, isSync: boolean, isServer: boolean }
type OnBefore = Info => void
type OnAfter = (Info, any) => void
type OnErrorProp = (error: { message: string }) => void

export type Props = {
error?: ?any,
isLoading?: ?boolean,
onBefore?: OnBefore,
onAfter?: OnAfter
onAfter?: OnAfter,
onError?: OnErrorProp
}

export type GenericComponent<Props> =
Expand Down
5 changes: 5 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,11 @@ export default function universal<Props: Props>(
onAfter(info, Component)
}
}
else if (error && this.props.onError) {
const { onError } = this.props
const info = { isMount, isSync, isServer }
onError(error)
}

this.setState(state)
}
Expand Down

0 comments on commit 8902849

Please sign in to comment.