### Install @just-web-tech/easy-modals

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Instructions on how to install the `@just-web-tech/easy-modals` library using npm. This command adds the package to your project's dependencies.

```sh
npm i @just-web-tech/easy-modals
```

--------------------------------

### Test Declarative Modal Definition and Opening

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Example test case for declaratively defined modals. It illustrates how to define a modal component, render it, open the modal, and verify its visibility in the DOM.

```tsx
it('works', () => {
  const modal = modals.create();
  const Component = modal.define(Modal);

  render(<Component />);

  act(() => modal.open());
  expect(screen.getByRole('dialog')).toBeInTheDocument();
});
```

--------------------------------

### Test Global Modal Registration and Opening

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Example test case demonstrating how to test a globally registered modal. It shows rendering `ModalsRegistry`, registering a modal, opening it, and asserting its presence in the document.

```tsx
it('works', () => {
  render(<ModalsRegistry />);

  const modal = modals.create();
  act(() => modal.register(Modal));

  act(() => modal.open());
  expect(screen.getByRole('dialog')).toBeInTheDocument();
});
```

--------------------------------

### Clear Modal States in Testing Environment

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Provides a setup for testing environments to ensure modal states are cleared after each test. This prevents state leakage between tests and ensures consistent results.

```tsx
afterEach(modals.cleanup);
```

--------------------------------

### Global Modal State Management in React

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Demonstrates how to create and register a modal globally using `modals.create` and `modal.register`. It shows how to use `modal.useState` to control modal visibility and data, and how to integrate `ModalsRegistry` into your application's root.

```tsx
const modal = modals.create<string>();

const Component = () => {
  const state = modal.useState();

  return (
    <Modal
      open={state.visible}
      onCancel={state.close}
      afterClose={state.remove}
      onOk={state.close}
    >
      {state.data}
    </Modal>
  );
};

modal.register(Component);
```

```tsx
const App = () => (
  <Fragment>
    {children}
    <ModalsRegistry />
  <Fragment>
);
```

```tsx
modal.open('Lorem ipsum dorem');
```

--------------------------------

### Declarative Modal Definition and Usage in React

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Explains how to define a modal declaratively using `modal.define` for scenarios where context or a component-like structure is preferred. It shows how to render the defined modal component and open it via a button click.

```tsx
const modal = modals.create<string>();
const SomeModal = modal.define(Component);
```

```tsx
<Fragment>
  <Button onClick={() => modal.open('message')}>
    Show
  </Button>
  <SomeModal />
</Fragment>
```

--------------------------------

### Update Modal Data State

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Shows how to update the data associated with a modal using the `modal.update` method. This allows for dynamic changes to the modal's content or internal state.

```tsx
const modal = modals.create<number>();
modal.update((prev) => prev + 1);
```

--------------------------------

### Close All Active Modals

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Demonstrates how to close all currently visible modals across the application using the `modals.close()` method. This is useful for global modal management.

```tsx
modals.close();
```

--------------------------------

### Check if Any Modals are Visible

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Explains how to determine if at least one modal is currently open using the `modals.anyVisible()` method. This returns a boolean value.

```tsx
modals.anyVisible();
```

--------------------------------

### Close the Most Recently Opened Modal

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Shows how to close only the last opened modal using the `modals.closeLatest()` method, providing fine-grained control over modal stack.

```tsx
modals.closeLatest();
```

--------------------------------

### Keep Modal Mounted After Closing

Source: https://github.com/just-web-tech/easy-modals/blob/main/README.md

Illustrates how to prevent a modal component from being removed from the DOM after it closes. This is achieved by omitting the `afterClose={state.remove}` prop from the `Modal` component.

```tsx
// To keep the modal mounted, remove the 'afterClose' prop:
// afterClose={state.remove}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.