Skip to main content

Webpack

Installation​

In your webpack project, Install the Dopt React component you would like to use with your preferred JavaScript package manager. For example, if installing the modal component:

npm install @dopt/react-modal

Setup​

If you are leveraging Dopt components headlessly (i.e., using the hooks only), then you can skip this setup step as long as you are using the hooks exports (e.g., @dopt/react-*/hooks). For example, if you are only using the modal component hooks:

import { useModal } from '@dopt/react-modal/hooks';

If you are leveraging Dopt React components as pre-built UI, then you'll need to configure webpack to load CSS using the style-loader and css-loader.

First, install the style-loader and css-loader packages:

npm install --save-dev style-loader css-loader

Then, add a rule to your webpack configuration to target .css files:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Usage​

Import the Dopt React component and use it as specified in the usage section of each component. For example, if using the modal component:

import Modal, { useModal } from '@dopt/react-modal';

function MyModal() {
  const modal = useModal('my-flow.four-pandas-jam');

  return (
    <Modal.Root active={modal.active}>
      <Modal.Overlay />
      <Modal.Content>
        <Modal.Header>
          <Modal.Title>{modal.title}</Modal.Title>
          <Modal.DismissIcon onClick={modal.dismiss} />
        </Modal.Header>
        <Modal.Body>{modal.body}</Modal.Body>
        <Modal.Footer>
          <Modal.DismissButton onClick={modal.dismiss}>
            {modal.dismissLabel}
          </Modal.DismissButton>
          <Modal.CompleteButton onClick={modal.complete}>
            {modal.completeLabel}
          </Modal.CompleteButton>
        </Modal.Footer>
      </Modal.Content>
    </Modal.Root>
  );
}