📝 Add examples to docs.

docs/package.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/pages/docs/about/changelog.mdx

@@ -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/api/idle-timer-provider.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/use-idle-timer.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/with-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/features/activity-detection.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/confirm-prompt.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/cross-tab.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/idle-detection.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' />

docs/src/components/mdx/CodeSandbox.tsx

@@ -0,0 +1,17 @@
+export function CodeSandbox (props: { name: string }) {
+  return (
+    <iframe src={`https://codesandbox.io/embed/${props.name}?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx&theme=dark&view=editor`}
+      style={{
+        width: '100%',
+        height: '500px',
+        border: 0,
+        borderRadius: '4px',
+        overflow: 'hidden',
+        marginTop: '2em'
+      }}
+      title="activity-detection"
+      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+    />
+  )
+}

docs/src/components/mdx/CodeSandboxButton.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react'
+import { Button, Link } from '@chakra-ui/react'
+import { FiCodesandbox } from 'react-icons/fi'
+
+export function CodeSandboxButton (props: PropsWithChildren<{ name: string }>) {
+  return (
+    <Link
+      href={`https://codesandbox.io/s/${props.name}`}
+      _hover={{ textDecoration: 'none' }}
+      isExternal
+      mb={2}
+    >
+      <Button
+        variant='ghost'
+        leftIcon={<FiCodesandbox />}
+        colorScheme='red'
+      >
+        {props.children}
+      </Button>
+    </Link>
+  )
+}

docs/src/components/mdx/index.tsx

@@ -5,6 +5,8 @@ import { Anchor } from '@components/mdx/Anchor'
 import { Pre } from '@components/mdx/Pre'
 import { CodeBlock } from '@components/mdx/CodeBlock'
 import { Property } from '@components/mdx/Property'
+import { CodeSandbox } from '@components/mdx/CodeSandbox'
+import { CodeSandboxButton } from '@components/mdx/CodeSandboxButton'
 
 const { Alert, Box, chakra } = Chakra
 
@@ -46,5 +48,7 @@ export const MDXComponents = {
       my='1.5rem'
       {...props}
     />
-  )
+  ),
+  CodeSandbox,
+  CodeSandboxButton
 }