fyndiq-component-modal

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	() => {}