fyndiq-component-modal

Preview

A Modal component for Fyndiq

Installation

The package can be installed through NPM:

npm i -S fyndiq-component-modal

It exports two main components: a Modal component which is fully customizable, as well as a confirm utility to quickly create beautiful confirm dialogs.

Modal

Usage

The easiest way to use the Modal component is to open it using ModalButton component:

import React from 'react'
import { ModalButton } from 'fyndiq-component-modal'

// Normal usage
<ModalButton button="Open Modal">
  Modal content
</ModalButton>

This setup will take care of opening the modal when pressing on the button, as well as closing the modal when clicking outside or pressing escape.

To customize the modal itself, you can pass it as a children:

import React from 'react'
import Modal, { ModalButton } from 'fyndiq-component-modal'

// Advanced styling
<ModalButton>
  <Modal overlayClassName="overlay" wrapperClassName="wrapper">
    Content
  </Modal>
</ModalButton>

// Access the onClose method from the children by using a function
<ModalButton>
  <Modal>
    {({ onClose }) => (
      <div>
        Content
        <button onClick={onClose}>Close popup</button>
      </div>
    )}
  </Modal>
</ModalButton>

For advanced use, you can use directly the Modal component and control its open prop, as well as binding the onClose callback prop.

API

The component Modal has the following customizable props:

| Name | Type | Description | Default value | |---|---|---|---| | open | Boolean | Shows or hide the modal | false | | children | React Node or Function | Content of the modal. If a function is passed, a onClose prop will be passed to it, to allow for programatical closing | null | | overlayClassName | String | ClassName of the background overlay |  | | **wrapperClassName** | String | ClassName of the content wrapper |  | | closeClassName | String | ClassName of the close button | `` | | forced | Boolean | Force the modal to be shown. Clicking outside or pressing ESC won't close it, instead you will have to use the children prop in function mode to programatically close it | false | | onClose | Function | Handler method called when the modal is closed | () => {} |

The component ModalButton has the following customizable props

| Name | Type | Description | Default value | |---|---|---|---| | button | Button or String | Content of the button that will open the modal. If a string is passed, it will be converted to a Button Component | Open Modal | | children | React Element | Content of the modal. If the element is not a Modal Component, it will be wrapped into one. Pass a Modal component as children to allow customisation of the Modal. | null |

Confirm

Usage

The easiest way to create a confirm flow is to use the confirm creation utility, as well as the Confirm React Component to customize its appearance.

import React from 'react'
import { Confirm, ConfirmWrapper, confirm } from 'fyndiq-component-modal'

// First you need to render the <ConfirmWrapper /> somewhere on your app.
// It is recommended that you put it somewhere in the root of your app:
const MyApp = () => (
  <React.Fragment>
    <ConfirmWrapper />
    <Layout /> {/* Rest of your app*/}
  </React.Fragment>
)

// This example shows how to display a warning confirm dialog,
// that pops up when the user clicks on a Delete button.
import { Warning } from 'fyndiq-icons'
import Button from 'fyndiq-component-button'

<Button onClick={confirmDelete}>
  ⚠️ Delete something
</Button>

// Here is where the magic happens ✨
async confirmDelete() => {
  const isValidated = await confirm(
    <Confirm
      type="warning"
      icon={<Warning />}
      title="Do you really want to delete that thing?"
      message="If you delete it, there is no way back"
      validateButton="Delete"
    />
  )

  if (isValidated) {
    // do something
  }
}

API

The component Confirm has the following customizable props

| Name | Type | Description | Default value | |---|---|---|---| | type | String | Color scheme of the dialog. One of info, warning, success | info | | title | Node | Title of the notification | Are you sure? | | message | Node | Additional message for the popup | '' | | icon | Icon | Icon shown on top of the confirm dialog | null | | validateButton | String or Button | Validate button (or text) | OK | | cancelButton | String or Button | Cancel button (or text) | Cancel | | open | Boolean | Shows or hide the confirm dialog. Used internally by the confirm utility | true | | onValidate | Function | Handler called when the user clicked on validate. Used internally by the confirm utility function | () => {} | | onCancel | Function | Handler called when the user clicked on cancel. Used internally by the confirm utility function | () => {} |