@lskjs/modal NPM

LSK ux subrepo: modal

Глобальные модалки

Как выглядит

Посмотрите демо: https://lskjs.github.io/ux/?path=/story/modal-global

Как использовать

Как можно раньше в рендере инициализируем провайдер.

import React from 'react';
import { ModalProvider }  from '@lskjs/modal/Global';

const Example = () => (
  <ModalProvider>
    ...
  </ModalProvider>
);

В нужном вам месте создайте модалку.

В виде хуков:

import React, { useContext, useEffect } from 'react';
import { ModalContext } from '@lskjs/modal/Global';

const Example = () => {
  const modal = useContext(ModalContext);
  
  let modalRef;
  useEffect(() => {
    modalRef = modal.create('id-modal', { size: 'small' }, (
      <div>Контент</div>
    ));
  }, []);
  return (
    <button
      onClick={() => modalRef.current.open()}
    >
      Открыть модалку
    </button>
  );
};

В виде Consumer:

import React from 'react';
import { ModalConsumer } from '@lskjs/modal/Global';

const Example = () => (
  <div>
    <ModalConsumer>
      {(modal) => {
        let modalRef;
        setTimeout(() => {
          modalRef = modal.create('id-modal', { size: 'small' }, (
            <div>Контент</div>
          ));
        }, 0);
        return (
          <button
            onClick={() => modalRef.current.open()}
          >
            Открыть модалку
          </button>
        );
      }}
    </ModalConsumer>
  </div>
);

Также контент можно передавать в виде callback'а:

modal.create('id', props, ({
  id,
  ref,
  Modal,
  methods,
  ...props // Все пропсы переданные при создании модалки 2 аргументом
}) => (
  <>
    <Modal.Title>Заголовок</Modal.Title>
    <Modal.Content>Контент</Modal.Content>
  </>
))

Методы контекста

Метод	Аргументы	Описание
create	`id`: string - ID модалки`props`: Object - Props для модалки`content`: ReactNode \| Function - Тело модалки	Создание модалки.Возвращает `ModalRef`.
update	`id`: string - ID модалки`props`: Object - Props для модалки`content`: ReactNode \| Function - Тело модалки	Обновление модалки.Возвращает `ModalRef`.
list		Список существующих модалок.Возвращает объект с `{ id: ModalCtx }`
get	`id`: string - ID модалки	Получение существующей модалки.Возвращает объект `ModalCtx`
open	`id`: string - ID модалки	Открытие существующей модалки.Вовзращает `id`
close	`id`: string - ID модалки	Закрытие существующей модалки.Возвращает `id`. Не удаляет инстанс модалки.
remove	`id`: string - ID модалки	Удаление модалки. Возвращает `id`.Открыть модалку с этим `id` больше не выйдет.

@lskjs/autobind react-custom-scrollbars react-if react-modal

@everything-registry/sub-chunk-561 @lskjs/docs @zalastax/nolb-_ls

1 month ago

2 months ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago