@atlaskit/app-switcher

akapp-switcher React component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @atlaskit/app-switcher in KB

Readme

Atlaskit component registry Commitizen friendly semantic-release Report an issue

AppSwitcher

This component provides an ADG3 app switcher.

Example @atlaskit/app-switcher

Try it out

Interact with a live demo of the @atlaskit/app-switcher component.

Installation

npm install @atlaskit/app-switcher

Using the component

Use the component in your React app as follows:

import AkAppSwitcher from '@atlaskit/app-switcher';

const data = {
 "recentContainers": [
   {
     "name": "Recent container",
     "url": "https://instance.atlassian.net/container1",
     "iconUrl": "https://instance.atlassian.net/container1-icon.png",
     "type": "Space"
   },
   {
     "name": "Recent container",
     "url": "https://instance.atlassian.net/container2",
     "iconUrl": "https://instance.atlassian.net/container1-icon.png",
     "type": "Software Project"
   },
   {
     "name": "https://instance.atlassian.net/container3",
     "url": "https://instance.atlassian.net/container3",
     "iconUrl": "https://instance.atlassian.net/container1-icon.png",
     "type": "Space"
   }
 ],
 "linkedApplications": {
   "configureLink": "https://instance.atlassian.net/configure-application-links",
   "apps": [
     {
       "name": "JIRA",
       "url": "https://instance.atlassian.net/"
     },
     {
       "name": "Confluence",
       "url": "https://instance.atlassian.net/wiki",
       "label": "7 Days Left"
     },
     {
       "name": "Other application",
       "url": "https://other.application.com"
     }
   ],
   "suggested": [
    "name": "Bitbucket",
    "product": "bitbucket",
    "onClick": () => {},
   ],
 },
 links: [
   {
     text: 'Add payment details',
     url: 'https://google.com/',
   },
   {
     text: 'Request a trial extension...',
     url: 'https://example.com/',
     analyticsRef: 'xyz',
   }
 ],
 "i18n": {
   "home": "Home",
   "apps": "Apps",
   "configure": "Configure",
 }
}

ReactDOM.render(<AkAppSwitcher {...data} />, container);

* Please note that this module could have dependencies that are governed by the Atlassian Design Guidelines license which will be automatically included on install. Each dependency has a license file that indicates whether the Atlassian Design Guidelines license applies.

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Are you in trouble? Read through our contribution guidelines and raise an issue to us.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.