• Introduction
• Tutorial
• Creating Custom Hooks
• Hooks
• lore-hook-actions
• lore-hook-auth
• lore-hook-bind-actions
• lore-hook-collections
• lore-hook-connect
• lore-hook-connections
• lore-hook-dialog
• lore-hook-dialogs-bootstrap
• lore-hook-dialogs-material-ui
• lore-hook-models
• lore-hook-polling
• lore-hook-react
• lore-hook-reducers
• lore-hook-redux
• lore-hook-router
• lore-hook-websockets-actioncable
• lore-hook-websockets-sails
• lore-hook-websockets-socketio

lore-hook-dialog

Source code for this hook can be found on GitHub at this link.

Purpose

Provide a helper method that knows how to attach dialogs to the DOM. By default it's configured to use the dialogDOM element in index.html, but can be configured to use something else.

<div id="dialog"></div>

The helper method is appended to lore.dialog.

Config

module.exports = {

  /**
   * DOM Element ID that the dialogs should be mounted to. Should be located
   * outside the DOM element the application is mounted to.
   */

  // domElementId: 'dialog'

};

Example Usage

Given a dialog called UpdateTweetDialog, this hook is used like this:

var tweet = this.props.tweet;

function updateTweet(params) {
  lore.actions.tweet.update(tweet, params);
}

lore.dialog.show(function() {
  return (
    <UpdateTweetDialog
      tweet={tweet}
      onSubmit={updateTweet} />
  );
});

The lore.dialog.show method makes sure the component gets instantiated and mounted to the correct DOM element. It also makes sure any dialog previously mounted to that DOM element is removed beforehand.