Skip to content
Home

GlobalStatus

Info
Demos
Properties
Events

Properties

PropertiesDescription
id(optional) the main ID. Defaults to main.
title(optional) the title appears as a part of the status content. Defaults to En feil har skjedd.
text or children(optional) the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to null.
items(optional) the items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. See Item Object example below.
icon(optional) the icon shown before the status title. Defaults to exclamation.
state(optional) defines the visual appearance of the status. There are four main statuses error, warning, info and success. The default status is error.
icon_size(optional) the icon size of the title icon shows. Defaults to medium.
show(optional) set to true or false to manually make the global status visible. Defaults to true.
autoclose(optional) set to true to automatically close the global status if there are no more left items in the provider stack. Defaults to true.
autoscroll(optional) set to true to automatically scroll the page to the appeared global status. Defaults to true.
no_animation(optional) set to true to disable the show/hide/slide/fade/grow/shrink animation. Defaults to false.
delay(optional) defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to 200ms.
hide_close_button(optional) set to true if the close button should be hidden for the user. Defaults to false.
close_text(optional) text of the close button. Defaults to Lukk.
status_anchor_text(optional) defines the anchor text showing up after every item, in case there is a status_id defined. Defaults to Gå til %s. The %s represents the optional and internal handled label addition.
omit_set_focus(optional) set to true to omit setting the focus during visibility. Defaults to false. Additionally, there is omit_set_focus_on_update which is set to true by default.
Space(optional) spacing properties like top or bottom are supported.

Item Object

// simple
const items = ['Item #1', 'Item #2']


// advanced
const items = [
  { text: 'Item #1', status_id: 'id-1' },
  { text: 'Item #2', status_id: 'id-2', status_anchor_url: 'https://' },
]
Advanced Item PropertiesDescription
text(required) the text appears as the status content. Beside plain text, you can send in a React component as well.
status_id(required) defines an unique ID so the message can be either updated or removed individual.
status_anchor_url(optional) Use status_anchor_url={true} to enable the go-to link, defined as a url hash using the status_id. Or provide it with an actual url: status_anchor_url="https://".
status_anchor_text(optional) defines the anchor text showing up after every item. Defaults to Gå til %s. The %s represents the optional and internal handled label addition.
status_anchor_label(optional) adds an additional text to the anchor (replaces %s), showing up after every item. Is used by default by other form components, if they have an label.

Controllers

In React, you can make use of the helper components, the function as a kind of a controller component. The goal is to update the content (properties/events) of the target GlobalStatus.

Code Editor
{/* Place the status wherever you have to.*/}
<GlobalStatus id="custom-id" />
{/* Manipulate the status later on. Every property is optional.*/}
<GlobalStatus.Add
  id="custom-id"
  status_id="status-1"
  item="Item #1"
  text="New Text"
  on_close={({ status_id }) => {
    console.log('on_close', status_id)
  }}
/>
<GlobalStatus.Add
  id="custom-id"
  status_id="status-2"
  item="Item #2"
  text="New Text"
  title="New Title"
  on_close={({ status_id }) => {
    console.log('on_close', status_id)
  }}
/>
<GlobalStatus.Add
  id="custom-id"
  status_id="status-3"
  item="Item #3"
  text="Text #3"
  on_close={({ status_id }) => {
    console.log('on_close', status_id)
  }}
/>
{/* or update the status.*/}
<GlobalStatus.Update id="custom-id" text="text" />
{/* Later you can remove a resolved item.*/}
<GlobalStatus.Remove id="custom-id" status_id="status-3" />
Controller PropertiesDescription
id(optional) the main ID. Defaults to main.
status_id(optional) define a new stack ID so you can remove it with the same ID later on. Defaults to null.
remove_on_unmount(optional) set to true if you want that the component <GlobalStatus.Add remove_on_unmount={true} ... /> should automatically remove the stacked status from the target GlobalStatus on component unmount. Defaults to false.

Configuration Object

This object is used as a representation to configure the GlobalStatus component from other components, using the globalStatus property. See Autocomplete, Button, Input, etc, as examples that use the globalStatus property.

{
  id: 'global-status-id',
  message: 'global status message'
}
Configuration Object PropertiesDescription
id(optional) the main ID. Defaults to main.
message(optional) the text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to null.