diff --git a/docs/docs/intro/default-variants-config/global-config.md b/docs/docs/intro/default-variants-config/global-config.md
index 1905a98e..5423d2cf 100644
--- a/docs/docs/intro/default-variants-config/global-config.md
+++ b/docs/docs/intro/default-variants-config/global-config.md
@@ -3,6 +3,7 @@ sidebar_position: 1
---
# đ Global Styles Settings
+
####
## đ¨ Default styles settings
@@ -10,27 +11,27 @@ sidebar_position: 1
In the default styles settings, we can pass the config that affects all the notifications used in the app.
We divide them into:
-| Name | Type | Default | Description |
-|---------------|---------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| darkMode | Boolean | false | If set to `true`, it enables the dark mode for the notification layout |
-| globalConfig | Object | - | Inside this object, you can pass the configuration for all notifications used in the app (or the parts wrapped with the `NotificationProvider`) |
-| successConfig | Object | - | Inside this object, you can pass the configuration for all success type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the success notifications overwrite the same params set in `globalConfig` |
+| Name | Type | Default | Description |
+| ------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| darkMode | Boolean | false | If set to `true`, it enables the dark mode for the notification layout |
+| globalConfig | Object | - | Inside this object, you can pass the configuration for all notifications used in the app (or the parts wrapped with the `NotificationProvider`) |
+| successConfig | Object | - | Inside this object, you can pass the configuration for all success type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the success notifications overwrite the same params set in `globalConfig` |
| errorConfig | Object | - | Inside this object, you can pass the configuration for all error type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the error notifications here overwrite the same params set in `globalConfig` |
| warningConfig | Object | - | Inside this object, you can pass the configuration for all warning type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the warning notifications here overwrite the same params set in `globalConfig` |
-| infoConfig | Object | - | Inside this object, you can pass the configuration for all info type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the info notifications here overwrites the same params set in `globalConfig` |
+| infoConfig | Object | - | Inside this object, you can pass the configuration for all info type notifications used in the app (or parts wrapped with the `NotificationProvider`). Here, all params set for the info notifications here overwrites the same params set in `globalConfig` |
#
```jsx
-const {useNotifications, NotificationsProvider} = createNotifications({
- defaultStylesSettings: {
- darkMode: true,
- globalConfig: {},
- successConfig: {},
- errorConfig: {},
- warningConfig: {},
- infoConfig: {},
- },
+const { useNotifications, NotificationsProvider } = createNotifications({
+ defaultStylesSettings: {
+ darkMode: true,
+ globalConfig: {},
+ successConfig: {},
+ errorConfig: {},
+ warningConfig: {},
+ infoConfig: {},
+ },
})
```
@@ -38,12 +39,13 @@ const {useNotifications, NotificationsProvider} = createNotifications({
Like we said above - in the config descriptions, `globalConfig` even if is set can be overwritten by the config of the different notifications types (`successConfig` / `errorConfig` / `warningConfig` / `infoConfig`).
You can find examples explaining it below, but first, let's find out what exactly, can we set in config objects.
+
#
+
## âī¸ Style config object
-
All five configs:
- `globalConfig`
@@ -53,61 +55,78 @@ All five configs:
- `infoConfig`
are the objects with the same properties.
+
#
-We can set there:
-| Name | Type | Default | Description |
-|------------------|---------------------------------------------|--------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|
-| titleSize | Number | `16` | Set font size for the notification title |
-| titleColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification title |
-| descriptionSize | Number | `14` | Set font size for the notification description |
-| descriptionColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification description |
-| bgColor | String | `'#FFFFFF'` (darkMode - false) / `'#2D2D2D'` (darkMode - true) | Set background color for the notification |
-| borderType | `'border'` / `'accent'` / `'no-border'` | `'border'` | Set type of border for the notification ([EXAMPLES](#-border-types-examples)) |
-| accentColor | String | `'#00EA33'` (success type) / `'#FC6060'` (error type) / `'#8CACFF'` (warning type) / `'#FFD37D'` (info type) | Set accent color for the notification. The color of the border or the left side accent line |
-| borderRadius | Number | `14` | Set border radius for the notification container |
-| borderWidth | Number | `1` | Set border width for the notification container |
-| multiline | Number | `1` | Set number of visible lines for the notification description |
-| defaultIconType | `'color'` / `'monochromatic'` / `'no-icon'` | `'color'` | This props works only with default icons. If you set your own icon it has no effect. ([EXAMPLES](#%EF%B8%8F-default-icon-type-examples)) |
-| leftIconSource | ImageSourcePropType | - | Set custom left icon for the notification (in png). For example. `require(../assets/icon.png)` |
+We can set there:
+| Name | Type | Default | Description |
+| ---------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| titleSize | Number | `16` | Set font size for the notification title |
+| titleColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification title |
+| descriptionSize | Number | `14` | Set font size for the notification description |
+| descriptionColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification description |
+| bgColor | String | `'#FFFFFF'` (darkMode - false) / `'#2D2D2D'` (darkMode - true) | Set background color for the notification |
+| borderType | `'border'` / `'accent'` / `'no-border'` | `'border'` | Set type of border for the notification ([EXAMPLES](#-border-types-examples)) |
+| accentColor | String | `'#00EA33'` (success type) / `'#FC6060'` (error type) / `'#8CACFF'` (warning type) / `'#FFD37D'` (info type) | Set accent color for the notification. The color of the border or the left side accent line |
+| borderRadius | Number | `14` | Set border radius for the notification container |
+| borderWidth | Number | `1` | Set border width for the notification container |
+| multiline | Number | `1` | Set number of visible lines for the notification description |
+| defaultIconType | `'color'` / `'monochromatic'` / `'no-icon'` | `'color'` | This props works only with default icons. If you set your own icon it has no effect. ([EXAMPLES](#%EF%B8%8F-default-icon-type-examples)) |
+| leftIconSource | ImageSourcePropType / JSX.Element | - | Set custom left icon for the notification (in png) or as custom component. For example. `require(../assets/icon.png)` / `` |
##
+
### đŗ Border types examples
- `'border'`
+
#
- 
+
+
- `'accent'`
+
#
- 
+
+
- `'no-border'`
+
#
- 
+
+
##
+
### đĩī¸ Default icon type examples
- `'color'`
+
#
+
- `'monochromatic'`
+
#
+
- `'monochromatic'` (dark mode)
+
#
+
- `'no-icon'`
+
#
-
+
##
+
## đī¸ Global styles setting examples
Let's start with the basic notification settings with some global style.
@@ -159,19 +178,20 @@ export const GlobalConfigExamples = () => {
)
}
-
```
The effect is visible below:
-
In `globalConfig` above, we have overwritten all the default values.
+
#
+
That means that doesn't matter now if we use `error` or `info` notification. All will now look the same.
That is what `globalConfig` does. It overwrites properties for all notifications.
If we set there only `borderRadius` property for some value, then only `borderRadius` would be set globally. Default values of all other properties would stay untouched:
+
#
```jsx
@@ -219,7 +239,6 @@ export const GlobalConfigExamples = () => {
)
}
-
```
@@ -230,6 +249,7 @@ export const GlobalConfigExamples = () => {
Both notifications - error and success - have their default settings. Only `borderRadius` has been changed for both of them because we did it in `globalConfig`.
##
+
### âšī¸ `successConfig` / `errorConfig` / `warningConfig` / `infoConfig`
Those settings work the same as `globalConfig` but for different notification types.
@@ -251,7 +271,7 @@ const { useNotifications, NotificationsProvider } = createNotifications({
},
successConfig: {
borderRadius: 10,
- }
+ },
},
})
@@ -288,18 +308,19 @@ export const GlobalConfigExamples = () => {
}
```
-
-
##
So in conclusion -
+
#
+
`successConfig` / `errorConfig` / `warningConfig` / `infoConfig` overwrites `globalConfig`, and DEFAULT SETTINGS
+
#
+
`globalConfig` overwrites DEFAULT SETTINGS
##
-
diff --git a/src/defaultConfig/components/notificationBase.tsx b/src/defaultConfig/components/notificationBase.tsx
index 5b166887..45727f80 100644
--- a/src/defaultConfig/components/notificationBase.tsx
+++ b/src/defaultConfig/components/notificationBase.tsx
@@ -23,9 +23,12 @@ export const NotificationBase = (props: NotificationOwnProps & MergedNotificatio
: require('../../assets/images/close-darkMode.png')
const { remove } = useNotificationController()
- const renderLeftIcon = () => (
-
- )
+ const renderLeftIcon = () =>
+ typeof props.leftIconSource === 'object' ? (
+ props.leftIconSource
+ ) : (
+
+ )
const renderRightIcon = () =>
!props.hideCloseButton && (
diff --git a/src/defaultConfig/mergeProps.ts b/src/defaultConfig/mergeProps.ts
index a3dab311..b609ea74 100644
--- a/src/defaultConfig/mergeProps.ts
+++ b/src/defaultConfig/mergeProps.ts
@@ -16,7 +16,7 @@ export const mergeProps = (
defaultGlobalConfig?: NotificationStyleConfig,
defaultNotificationTypeConfig?: NotificationStyleConfig
): NotificationProps & MergedNotificationStyleConfig => {
- const customIconSource: ImageSourcePropType | undefined =
+ const customIconSource: ImageSourcePropType | undefined | JSX.Element =
props.style?.leftIconSource ??
defaultNotificationTypeConfig?.leftIconSource ??
defaultGlobalConfig?.leftIconSource
diff --git a/src/defaultConfig/types.ts b/src/defaultConfig/types.ts
index 4274178d..972736c7 100644
--- a/src/defaultConfig/types.ts
+++ b/src/defaultConfig/types.ts
@@ -36,7 +36,7 @@ export type NotificationStyleConfig = Partial<{
borderWidth: number
multiline: number
defaultIconType: IconVisualStyle
- leftIconSource: ImageSourcePropType
+ leftIconSource: ImageSourcePropType | JSX.Element
borderType: BorderType
imageStyle: ImageStyle
}>