📝 Add examples to docs.

Author: SupremeTechnopriest

docs/package-lock.json

@@ -25,7 +25,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
-    "react-idle-timer": "^5.5.0",
+    "react-idle-timer": "^5.5.2",
     "remark": "^14.0.2",
     "remark-emoji": "^3.0.2",
     "remark-gfm": "^3.0.1",

docs/package.json

@@ -2,6 +2,18 @@
 title: Changelog
 description: IdleTimer Changelog
 ---
+### 5.5.2
+<Divider />
+
+#### ✨ Enhancements
+- Add defaults to `IdleTimerComponent` generic typescript types.
+
+### 5.5.1
+<Divider />
+
+#### ✨ Enhancements
+- Cross-tab related methods will no longer throw an error if the manager is not ready yet. It will instead return `null`.
+
 ## 5.5.0
 <Divider />
 

docs/pages/docs/about/changelog.mdx

@@ -30,7 +30,7 @@ and the `useIdleTimerContext` hook.
 ```jsx
 import { IdleTimerProvider, useIdleTimerContext } from 'react-idle-timer'
 
-export function Child (props) => {
+export function Child () {
   const idleTimer = useIdleTimerContext()
   return (
     <h1>{idleTimer.isIdle()}</h1>
@@ -203,7 +203,7 @@ To preserve types for your component's context, declare the type for the
 component's context property.
 
 ```tsx
-import { Component, ContextTypes } from 'react'
+import { Component, ContextType } from 'react'
 import { IIdleTimerContext, IdleTimerContext } from 'react-idle-timer'
 
 export class Child extends Component<{}, {}> {
@@ -212,7 +212,7 @@ export class Child extends Component<{}, {}> {
   static contextType = IdleTimerContext
 
   // Declare a type for context to preserve typescript types
-  declare context: ContextType<IIdleTimerContext>
+  context!: ContextType<typeof IIdleTimerContext>
 
   render () {
     return (
@@ -221,3 +221,10 @@ export class Child extends Component<{}, {}> {
   }
 }
 ```
+
+## Examples
+
+<Flex direction='column' mt={8}>
+  <CodeSandboxButton name='functional-context-provider-jz4y77'>Functional Context Provider</CodeSandboxButton>
+  <CodeSandboxButton name='class-context-provider-mfujuj'>Class Context Provider</CodeSandboxButton>
+</Flex>

docs/pages/docs/api/idle-timer-provider.mdx

@@ -121,4 +121,12 @@ export const App = () => {
 }
 ```
 
-For more examples, see the [Features](/docs/features/idle-detection) section.
+## Examples
+
+<Flex direction='column' mt={8}>
+  <CodeSandboxButton name='idle-timer-hook-03790m'>Idle Detection</CodeSandboxButton>
+  <CodeSandboxButton name='activity-detection-tmn5bp'>Activity Detection</CodeSandboxButton>
+  <CodeSandboxButton name='cross-tab-2e1tbp'>Cross Tab Support</CodeSandboxButton>
+  <CodeSandboxButton name='confirm-prompt-y8ew9s'>Confirm Prompt</CodeSandboxButton>
+  <CodeSandboxButton name='presence-change-handler-2grrwh'>Presence Change Handler</CodeSandboxButton>
+</Flex>

docs/pages/docs/api/use-idle-timer.mdx

@@ -274,4 +274,8 @@ const element = document.getElementById('root')
 render(<Root />, element)
 ```
 
-For more examples, see the [Features](/docs/features) section.
+## Examples
+
+<Flex direction='column' mt={8}>
+  <CodeSandboxButton name='higher-order-component-9fyvnr'>Higher Order Component</CodeSandboxButton>
+</Flex>

docs/pages/docs/api/with-idle-timer.mdx

@@ -32,7 +32,5 @@ The methods associated with activity detection are:
 - [getElapsedTime](/docs/api/methods#getelapsedtime): Returns the ammount of milliseconds since the host component was mounted.
 {/* cspell:enable */}
 
-### Examples
-
-> Examples will be added once v5 is out of beta. For now you can check out the
-> simple examples in the [API](/docs/api/use-idle-timer) section.
+### Example
+<CodeSandbox name='activity-detection-tmn5bp' />

docs/pages/docs/features/activity-detection.mdx

@@ -26,7 +26,5 @@ The methods associated with the confirm prompt feature are:
 - [isPrompted()](/docs/api/methods#isprompted): Returns true if the prompt is displayed.
 {/* cspell:enable */}
 
-### Examples
-
-> Examples will be added once v5 is out of beta. For now you can check out the
-> simple examples in the [API](/docs/api/use-idle-timer) section.
+### Example
+<CodeSandbox name='confirm-prompt-y8ew9s' />

docs/pages/docs/features/confirm-prompt.mdx

@@ -31,7 +31,5 @@ The methods associated with the cross tab feature are:
 - [getTabId()](/docs/api/methods#gettabid): Returns the current tab's id.
 {/* cspell:enable */}
 
-### Examples
-
-> Examples will be added once v5 is out of beta. For now you can check out the
-> simple examples in the [API](/docs/api/use-idle-timer) section.
+### Example
+<CodeSandbox name='cross-tab-2e1tbp' />

docs/pages/docs/features/cross-tab.mdx

@@ -46,7 +46,5 @@ The methods associated with idle detection are:
 - [getTotalIdleTime](/docs/api/methods#gettotalidletime): Returns time in milliseconds the user was idle since the component mounted.
 {/* cspell:enable */}
 
-### Examples
-
-> Examples will be added once v5 is out of beta. For now you can check out the
-> simple examples in the [API](/docs/api/use-idle-timer) section.
+### Example
+<CodeSandbox name='idle-timer-hook-03790m' />