Modal

⚠️ This documentation file needs to be reviewed ⚠️, but the component is ready to use.

Modal is modal window used to get users to perform and action in an isolated context.

Basic Usage

To implement the Modal component, you need to import it first:

import { Modal } from 'rades_react';

And use it:

React.createElement(() => {
  const [modalOpen, setModalOpen] = React.useState(false);
  const primaryButtonRef = React.useRef();
  const closeButtonRef = React.useRef();

  return (
    <>
      <Button
        label="Launch modal"
        onClick={() => setModalOpen(true)}
      />
      <div>
        {modalOpen && (
          <Modal
            actions={(
              <>
                <Button
                  label="Save"
                  onClick={() => setModalOpen(false)}
                  ref={primaryButtonRef}
                />
                <Button
                  color="secondary"
                  label="Cancel"
                  onClick={() => setModalOpen(false)}
                  ref={closeButtonRef}
                />
              </>
            )}
            closeButtonRef={closeButtonRef}
            primaryButtonRef={primaryButtonRef}
            title="Pick language"
          >
            <SelectField
              label="Language"
              options={[
                {
                  label: 'English',
                  value: 1,
                },
                {
                  label: 'Deutsch',
                  value: 2,
                },
                {
                  label: 'Česky',
                  value: 3,
                },
              ]}
            />
          </Modal>
        )}
      </div>
    </>
  );
});

See API for all available options.

API