From 00115dc93a38eba680c9a2166102882179899b99 Mon Sep 17 00:00:00 2001 From: devrnt Date: Sat, 23 May 2020 22:07:49 +0200 Subject: [PATCH 1/2] docs: add some extra remarks in readme --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5e1655cf..d964da9a 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,8 @@ const HomePage = () => { ### IntercomProvider `IntercomProvider` is used to initialize the `window.Intercom` instance. It makes sure the initialization is only done once. If any listeners are passed, the `IntercomProvider` will make sure these are attached. +Place the `IntercomProvider` as high as possible in your application. This will make sure you can `useIntercom()` anywhere. + #### Props | name | type | description | required | default | |---------------------|------------------|-----------------------------------------------------------------------------------------|----------|---------| @@ -96,7 +98,9 @@ const App = () => { ### useIntercom Used to retrieve all methods bundled with Intercom. These are based on the official [Intercom docs](https://developers.intercom.com/installing-intercom/docs/javascript-api-attributes-objects). Some extra methods were added to improve convenience. -**Remark** - make sure `IntercomProvider` is wrapped around your component when calling `useIntercom()` + Make sure `IntercomProvider` is wrapped around your component when calling `useIntercom()`. + +**Remark** - You can't use `useIntercom()` in the same component where `IntercomProvider` is initialized. #### Methods | name | type | description | From 883ab5d3323a519cee9031445c152c6dbbcc81eb Mon Sep 17 00:00:00 2001 From: devrnt Date: Sat, 23 May 2020 22:13:05 +0200 Subject: [PATCH 2/2] docs: add troubleshoot section in readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index d964da9a..c98e7c20 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,7 @@ const HomePage = () => { * [API](#intercom) * [Playground](#playground) * [TypeScript](#typescript) +* [Troubleshoot](#troubleshoot) * [Advanced](#advanced) ## API @@ -218,6 +219,16 @@ These props are `JavaScript` 'friendly', so [camelCase](https://en.wikipedia.org **Remark** - if you want to pass custom properties, you should still use [snake_cased](https://en.wikipedia.org/wiki/Snake_case) keys. +## Troubleshoot +* I'm seeing "Please wrap your component with IntercomProvider.` in the console. +> Make sure `IntercomProvider` is initialized before calling `useIntercom()`. You only need to initialize `IntercomProvider` once. It is advised to initialize `IntercomProvider` as high as possible in your application tree. + +> Make sure you aren't calling `useIntercom()` in the same component where you initialized `IntercomProvider`. + +* I'm seeing `Some invalid props were passed to IntercomProvider. Please check following props: [properties]` in the console. +> Make sure you're passing the correct properties to the `IntercomProvider`. Check [IntercomProvider](#intercomprovider) to see all the properties. +> Mind that all the properties in `react-use-intercom` are camel cased, except for the `customAttributes` property in the `boot` and `update` method from `useIntercom`. + ## Advanced To reduce the amount of re-renders in your React application I suggest to make use of [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback)