Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: set up docsaurus for API reference docs and add content #113

Merged
merged 5 commits into from
Jun 1, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
303 changes: 303 additions & 0 deletions docs/docs/api/apiReference.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,303 @@
---
sidebar_position: 1
title: API
---

# ⚙️ API Reference


Below you will find a short description of all methods and properties that the library exposes.
All entries are sorted alphabetically.
***
### `animationConfig`

Parameter used to configure animation. Can be set up for the entire app or selectively for a particular notification.
Below is the global configuration:

```tsx
import { createNotifications, RotateInRotateOut } from 'react-native-notification'

const { NotificationsProvider } = createNotifications({
animationConfig: RotateInRotateOut
})
```

And it can be overwritten in local scope, when calling notification:

```tsx
import { SlideInLeftSlideOutRight } from 'react-native-notification'

[...]

notify('success', {
params: {
title: 'Success',
description: 'This is where the toast text goes',
},
config: {
animationConfig: SlideInLeftSlideOutRight,
},
})
```
We've prepared for you a couple of ready-to-use animations (just import them from the library):

- `RotateZIn`
- `ZoomInDownZoomOutUp`
- `ZoomInDownZoomOutDown`
- `RotateInRotateOut`
- `SlideInLeftSlideOutRight`

***
### `createNotifications()`

API used to initialize the library in the project.

```tsx
import { createNotifications } from 'react-native-notification'

const { NotificationsProvider } = createNotifications()
```
The `createNotifications()` invoked without any configuration, as in the above example, is fairly enough to use the library on its basic level.
Here is an example of all available parameters, that can be adjusted in `createNotifications()`:

```tsx
const { NotificationsProvider } = createNotifications({
duration: number // -> default 3000
notificationPosition: NotificationPosition
animationConfig: CustomAnimationConfig
gestureConfig: GestureConfig
isNotch?: boolean // -> by default uses react-native-device-info
defaultStylesSettings: {
darkMode: false,
globalConfig: StyleProps
successConfig: StyleProps
errorConfig: StyleProps
warningConfig: StyleProps
infoConfig: StyleProps
},
variants: CustomVariants
})
```
Check on [`StyleProps`](https://thewidlarzgroup.github.io/react-native-notificated/docs/api/types#styleprops)

The `defaultStylesSettings` provides styles for all default notifications. `globalConfig` is on the top of the hierarchy, and distributes styles for all types of build-in notifications: success, error, warning, and info. For example `successConfig` (if provided) will overwrite `globalConfig` styles only for notifications of type 'success'. `successConfig` styles can be overwritten on the lowest level when calling notification 'success' using a `notify()`. Check on [`Order of settings overwriting`](https://thewidlarzgroup.github.io/react-native-notificated/docs/comprehensive-configuration/order-of-settings-overwriting) for more details.

***
### `generateAnimationConfig()`

This method allows to set up custom animations.

```tsx
generateAnimationConfig(config: CustomAnimationConfig)
```
Check on [`CustomAnimationConfig`](https://thewidlarzgroup.github.io/react-native-notificated/docs/api/types#customanimationconfig) and [`Custom transitions`](https://thewidlarzgroup.github.io/react-native-notificated/docs/animations/custom-transitions)

It takes four properties:

- `animationConfigIn` // -> REQUIRED
- `animationConfigOut`
- `transitionInStyles` // -> REQUIRED
- `transitionOutStyles`

```tsx
import { generateAnimationConfig } from 'react-native-notificated'

const myCustomAnimation = generateAnimationConfig({
animationConfigIn: {
type: "timing" | "spring",
config: WithSpringConfig | WithTimingConfig // -> Reanimated type declarations
},
animationConfigOut: {
type: "timing" | "spring",
config: WithSpringConfig | WithTimingConfig // -> Reanimated type declarations
},
transitionInStyles: (progress: SharedValue<number>) => AnimatedStylesType // -> must be a worklet / Reanimated type declarations
transitionOutStyles: (progress: SharedValue<number>) => AnimatedStylesType // -> must be a worklet / Reanimated type declarations
})
```
***
### `modify()`

Method returned from `useNotifications()` and `useNotificationsController()` hooks.
This method is very similar to notify.
The main difference is that you have the opportunity to change existing notifications.

```tsx
modify(id: string, setup: { params: NotificationParams; config?: NotificationConfigParams }): void
```

Jump to [`NotificationParams`](https://thewidlarzgroup.github.io/react-native-notificated/docs/api/types#notificationparams) and [`NotificationConfigParams`](https://thewidlarzgroup.github.io/react-native-notificated/docs/api/types#notificationconfigparams)

Sample code below shows how the method should be implemented:

```tsx
import { useNotifications } from 'react-native-notificated'

const SomeFunctionComponent = () => {
const [id, setId] = useState('')
const { modify, notify } = useNotifications()

return (
<View>
<Button
title='launch notification'
onPress={() =>
setId(
notify('success', {
params: {
description: 'This is where the toast text goes',
title: 'Success',
},
}).id
)
}
/>
<Button
title='modify notification'
onPress={() =>
modify(id, {
params: {
title: 'Hello',
description: 'Wow, that was easy',
},
})
}
>
</View>
)
}
```
***
### `NotificationsProvider`

Provider, which acts as the notifications root. Depending on when you mount it, this will be the place where the notifications get rendered in your component tree.

```tsx
return (
<>
<App />
<NotificationsProvider />
</>
)
```
***
### `notify()`

This method is responsible for launching notification (default or custom, if implemented).
Is returned from `useNotifications()` hook.

```tsx
notify(notificationType: string, setup: { params: NotificationParams; config?: NotificationConfigParams }): string
```
Jump to [`NotificationParams`](https://thewidlarzgroup.github.io/react-native-notificated/docs/api/types#notificationparams) and [`NotificationConfigParams`](https://thewidlarzgroup.github.io/react-native-notificated/docs/api/types#notificationconfigparams)

Sample code below shows how should be implemented:

```tsx
import { useNotifications } from 'react-native-notificated'

const SomeFunctionComponent = () => {
const { notify } = useNotifications()

const notificationMetadata = notify('success', {
params: {
title: 'Hello',
description: 'Wow, that was easy',
},
})
}
```
The `notify()` returns the notification's id.
The ID can be later used to manipulate that particular notification (remove or update content).

```tsx
[...]
const notificationID = notify('success', {
params: {
title: 'Hello',
description: 'Wow, that was easy',
},
}).id
[...]
```

***
### `remove()`

This method removes notification. It is returned from `useNotifications()` and `useNotificationsController()` hooks.

```tsx
remove(id: string): void
```

Sample code below shows how it works:

```tsx
import { useNotifications } from 'react-native-notificated'

const SomeFunctionComponent = () => {
const [id, setId] = useState('')
const { remove, notify } = useNotifications()

return (
<View>
<Button
title='launch notification'
onPress={() =>
setId(
notify('success', {
params: {
description: 'This is where the toast text goes',
title: 'Success',
},
}).id
)
}
/>
<Button
title='remove notification'
onPress={() => remove(id)}
>
</View>
)
}
```
***
### `useNotifications()`

The hook is imported from 'react-native-notificated' and can be used only inside function component.

```tsx
import { useNotifications } from 'react-native-notificated'

const SomeFunctionComponent = () => {
const { notify, modify, remove } = useNotifications()

[...]
}
```
The `useNotifications()` provides three methods: notify, modify and remove - described separately.

***

### `useNotificationsController()`

The hook is imported from 'react-native-notificated' and can be used only inside function component.

```tsx
import { useNotificationsController } from 'react-native-notificated'

const SomeFunctionComponent = () => {
const { modify, remove } = useNotifications()

[...]
}
```
The `useNotificationsController()` provides two methods: modify and remove - described separately.

***





Loading