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
- Yarn
- pnpm
npm install @dopt/react-modal
yarn add @dopt/react-modal
pnpm add @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:
/** @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>
);
}