Flags provider
Flags provider creates a flag group and manages the state of flags.Default
To show flags without managing a FlagGroup, wrap your application in a FlagsProvider, which
provides context to its children.
import React from 'react';
import { FlagsProvider } from '@atlaskit/flag';
const FlagProviderExample = () => {
return (
<FlagsProvider>
<h3>I'm wrapped in a flags provider.</h3>
</FlagsProvider>
);
};
export default FlagProviderExample;Using showFlags
Any components within your application can now access the function showFlags from the context by
calling useFlags. Call showFlags with an object of type CreateFlagArgs and a Flag will be
displayed. CreateFlagArgs is defined as follows:
| Description | Array of clickable actions to be shown at the bottom of the flag. For flags where appearance is 'normal', actions will be shown as links. For all other appearance values, actions will shown as buttons. If href is passed the action will be shown as a link with the passed href prop. |
|---|---|
| Type | ActionType[] |
| Description | Additional information to be included in the |
|---|---|
| Type | { [x: string]: any; } |
| Description | Makes the flag appearance bold. Setting this to anything other than 'normal' hides the dismiss button. |
|---|---|
| Type | "error" | "info" | "success" | "warning" | "normal" |
| Description | You should not be accessing this prop under any circumstances.
It is provided by |
|---|---|
| Type | (payload: AnalyticsEventPayload) => UIAnalyticsEvent |
| Description | Milliseconds to delay the screen reader announcement due to announcement conflict. |
|---|---|
| Type | number |
| Description | The secondary content shown below the flag title. |
|---|---|
| Type | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal |
| Description | Specifies the heading level in the document structure.
If not specified, the default is |
|---|---|
| Type | 1 | 2 | 3 | 4 | 5 | 6 |
| Description | The icon displayed in the top-left of the flag. Should be an instance of |
|---|---|
| Type | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal |
| Description | A unique identifier used for rendering and onDismissed callbacks. This will be autogenerated if you don’t supply one. If you don’t want the same flag showing multiple times, provide a unique id. |
|---|---|
| Type | string | number |
| Description | Marks whether the flag should render as an AutoDismissFlag |
|---|---|
| Type | boolean |
| Description | A link component that is passed down to the |
|---|---|
| Type | ComponentClass<CustomThemeButtonProps, any> | FunctionComponent<CustomThemeButtonProps> |
| Description | Standard onBlur event, applied to Flag by AutoDismissFlag. |
|---|---|
| Type | (e: FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void |
| Description | Handler which will be called when a Flag's dismiss button is clicked. Receives the id of the dismissed Flag as a parameter. |
|---|---|
| Type | (id: string | number, analyticsEvent: UIAnalyticsEvent) => void |
| Description | Standard onFocus event, applied to Flag by AutoDismissFlag. |
|---|---|
| Type | (e: FocusEvent<HTMLElement, Element>, analyticsEvent: UIAnalyticsEvent) => void |
| Description | Standard onMouseOut event, applied to Flag by AutoDismissFlag. |
|---|---|
| Type | (event: MouseEvent<Element, MouseEvent>) => void |
| Description | Standard onMouseOver event, applied to Flag by AutoDismissFlag. |
|---|---|
| Type | (event: MouseEvent<Element, MouseEvent>) => void |
| Description | No description. |
|---|---|
| Type | ((instance: any) => void) | RefObject<any> |
| Description | A Will set these elements when defined:
|
|---|---|
| Type | string |
| Description | The bold text shown at the top of the flag. |
|---|---|
| Type | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal |
The return value of showFlags is a function that dismisses the flag that was just created.
import React, { useRef } from 'react';
import ButtonGroup from '@atlaskit/button/button-group';
import Button from '@atlaskit/button/new';
import noop from '@atlaskit/ds-lib/noop';
import { FlagsProvider, useFlags } from '@atlaskit/flag';
import InformationIcon from '@atlaskit/icon/glyph/info';
import { token } from '@atlaskit/tokens';
const actions = [
{
content: 'Nice one!',
onClick: noop,
},
];
const FlagGroupExample = () => {
const flagCount = useRef(1);
const { showFlag } = useFlags();
const addFlag = () => {
const id = flagCount.current++;
showFlag({
actions,
description: 'Added from the context.',
icon: (
<InformationIcon
label="Info"
primaryColor={token('color.icon.information')}
/>
),
id: id,
title: `${id}: Whoa a new flag!`,
});
};
const addFlagNoId = () => {
showFlag({
actions,
description: 'I was not given an id.',
icon: (
<InformationIcon
label="Info"
primaryColor={token('color.icon.information')}
/>
),
title: `${flagCount.current++}: Whoa a new flag!`,
});
};
const addAutoDismissFlag = () => {
showFlag({
actions,
description: 'I will automatically dismiss after 8 seconds.',
icon: (
<InformationIcon
label="Info"
primaryColor={token('color.icon.information')}
/>
),
title: `${flagCount.current++}: Whoa a new flag!`,
isAutoDismiss: true,
});
};
return (
<ButtonGroup label="Choose a flag">
<Button onClick={addFlag}>Add Flag</Button>
<Button onClick={addFlagNoId}>Add Flag without id</Button>
<Button onClick={addAutoDismissFlag}>Add AutoDismissFlag</Button>
</ButtonGroup>
);
};
export default () => (
<FlagsProvider>
<FlagGroupExample />
</FlagsProvider>
);