Skip to main content

Remix

Installation​

In your Remix 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 add the Dopt React component package(s) and their dependencies to serverDependenciesToBundle in your Remix configuration. For example, if using the modal component:

remix.config.js
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverDependenciesToBundle: [
    /^@dopt\/react-tour/,
    /^@dopt\/react-rich-text/,
    /^@dopt\/react-theme/,
    /^@dopt\/core-theme/,
  ],
};

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>
  );
}