Skip to content

Commit 4a41df2

Browse files
committed
add missing context docs
1 parent e328f44 commit 4a41df2

File tree

2 files changed

+92
-0
lines changed

2 files changed

+92
-0
lines changed
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
id: theme-context
3+
title: ThemeContext
4+
---
5+
6+
`ThemeContext` is provided by [`OverlayProvider`](../core-components/overlay_provider.mdx) and [`Chat`](../core-components/chat.mdx) components.
7+
Read the [theming section](../customization/theming.mdx) for more information on how to customize your theme.
8+
If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).
9+
10+
## Basic Usage
11+
12+
`ThemeContext` can be consumed by any of the child component of `OverlayProvider` or `Chat` components.
13+
14+
```tsx
15+
import { useContext } from 'react';
16+
import { ThemeContext } from 'stream-chat-react-native';
17+
18+
const {
19+
theme: {
20+
colors: { accent_red },
21+
},
22+
} = useContext(OverlayContext);
23+
```
24+
25+
Alternatively, you can also use `useTheme` hook provided by library to consume ThemeContext.
26+
27+
```tsx
28+
import { useTheme } from 'stream-chat-react-native';
29+
30+
const {
31+
theme: {
32+
colors: { accent_red },
33+
},
34+
} = useTheme();
35+
```
36+
37+
## Value
38+
39+
### theme
40+
41+
The default theme object in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/master/src/contexts/themeContext/utils/theme.ts)
42+
merged with the theme you pass as `style` to [`OverlayProvider`](../core-components/overlay_provider.mdx) or [`Chat`](../core-components/chat.mdx) components.
43+
44+
| Type |
45+
| - |
46+
| object |
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
id: translation-context
3+
title: TranslationContext
4+
---
5+
6+
`TranslationContext` is provided by [`OverlayProvider`](../core-components/overlay_provider.mdx) and [`Chat`](../core-components/chat.mdx) components.
7+
Read the [translations section](../basics/translations/) for more information on how to customize your translations.
8+
If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).
9+
10+
## Basic Usage
11+
12+
`TranslationContext` can be consumed by any of the child component of `OverlayProvider` or `Chat` components.
13+
14+
```tsx
15+
import { useContext } from 'react';
16+
import { TranslationContext } from 'stream-chat-react-native';
17+
18+
const { t, tDateTimeParser } = useContext(TranslationContext);
19+
```
20+
21+
Alternatively, you can also use `useTranslationContext` hook provided by library to consume TranslationContext.
22+
23+
```tsx
24+
import { useTheme } from 'stream-chat-react-native';
25+
26+
const { t, tDateTimeParser } = useTranslationContext();
27+
```
28+
29+
## Value
30+
31+
### t
32+
33+
Given a key, extracts the translated text from the Streami18n instance.
34+
35+
| Type |
36+
| - |
37+
| function |
38+
39+
### tDateTimeParser
40+
41+
Used for translating dates and times into the desired local format.
42+
43+
| Type |
44+
| - |
45+
| function |
46+

0 commit comments

Comments
 (0)