Notification Icon

On this page:

• About the Notification Icon
• Setting Up the Notification Icon
• Props
• Examples

About the Notification Icon

Notification Icon is a component that can be placed anywhere in the Document Object Model (DOM). This component syncs to your AutoQL data and displays a badge when it detects new notifications. It would typically be placed in the main header menu within your application.

Setting Up the Notification Icon

The following sections in this document contain detailed information about how to customize the properties of this widget.

JavaScript

import React from 'react'
import { NotificationIcon } from 'react-autoql';

import 'react-autoql/dist/autoql.esm.css'

export default class App extends React.Component {
  render = () => {
    return (
      <NotificationIcon
        authentication={{
          apiKey="your-api-key"
          domain="https://yourdomain.com"
          token="your-jwt-token"
        }}
      />
    )
  }
}

Props

Prop Name	Data Type	Default Value
authentication (required)	Object	{}
overflowCount	Number	99
useDot	Boolean	false
clearCountOnClick	Boolean	true
onNewNotification	Function	(notification) => {}
onErrorCallback	Function	(error) => {}

overflowCount: The maximum number of new notifications to display in the red badge before appending a +.

useDot: Set to false if you do not want numbers to show in the red badge. Instead, it will show a small red dot if there are new notifications.

clearCountOnClick: Whether or not to clear the number in the badge when the notification icon is clicked. By default this is set to true.

onNewNotification(notification): A callback for when a new notification comes in.

onErrorCallback(error): A callback for when an error occurs in the component.

authentication Prop

Key	Value Type	Description
token	String	Your valid JWT encrypted with your user ID and customer ID. For more information on how to create this token, please see: Create JSON Web Tokens (JWT)
apiKey	String	Your API key. For more information on how to obtain this, please see: Manage API Keys
domain	String	The base URL for your API.

themeConfig Prop

Key	Value Type	Default
theme	String: 'light' || 'dark'	'light'
accentColor	String	light theme: '#28a8e0', dark theme: '#525252'
fontFamily	String	'sans-serif'
chartColors	Array	['#26A7E9', '#A5CD39', '#DD6A6A', '#FFA700', '#00C1B2']

theme: Currently there are two options: light theme and dark theme. In addition to changing the overall theme, you can also change the accent color using the accentColor prop.

accentColor: Primary accent color used for buttons, link, or hover effects. Note that the visualization (table and chart) colors will not be affected here.

fontFamily: Customize the font family to the provided font wherever possible. Accepts any CSS font family that is available, and if none is provided, will default to Sans-Serif.

chartColors: Array of color options for the chart visualization themes, starting with the most primary. You can pass any valid CSS color format in here, however it is recommended that the color is opaque (ex. "#26A7E9", "rgb(111, 227, 142)", or "red"). Charts will always apply the colors in order from first to last. If the visualization requires more colors than provided, all colors will be used and then repeated in order.

Examples

JavaScript

import React from 'react'
import { NotificationIcon } from 'react-autoql';

import 'react-autoql/dist/autoql.esm.css'

export default class App extends React.Component {
  render = () => {
    return (
      <NotificationIcon
        authentication={{
          apiKey="your-api-key"
          domain="https://yourdomain.com"
          token="your-jwt-token"
        }}
        overflowCount={9}
        onNewNotification={() => {
        	alert('You have a new notification!')
        }}
      />
    )
  }
}