This package has been deprecated

Author message:

This package has been deprecated. Please use the '@atlaskit' scoped packages instead. See https://atlaskit.atlassian.com for more information

ak-inline-dialog

Inline Dialog

The Inline Dialog is a container for secondary content and controls that are displayed on user request.

Try it out

Interact with a live demo of the ak-inline-dialog component.

Installation

npm install ak-inline-dialog

Using the component

ak-inline-dialog is a React component that can wrap content and then toggle the display of an aligned dialog box.

Example usage:

import React, { PropTypes, PureComponent } from 'react';
import AKInlineDialog from 'ak-inline-dialog';
 
class ButtonActivatedDialog extends PureComponent {
  static propTypes = {
    content: PropTypes.node,
    position: PropTypes.string,
  }
 
  state = {
    isOpen: false,
  };
 
  handleClick = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }
 
  render = () => (
    <AKInlineDialog
      content={this.props.content}
      position={this.props.position}
      isOpen={this.state.isOpen}
    >
      <button onClick={this.handleClick} />
    </AKInlineDialog>
  )
}

This would allow you to use the ButtonActivatedDialog class to render something similar to the example gif above.

Support and feedback

We're here to help!

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

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!