eBay Nice Modal React

https://ebay.github.io/nice-modal-react/
Admin
eBay Nice Modal React is a React library for managing modals declaratively with support for...
Tokens:905
Snippets:3
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Show User Creation/Edit Modal with Ant Design

Source: https://ebay.github.io/nice-modal-react

This component displays a list of users and allows for creating new users or editing existing ones by showing a modal. It uses Ant Design for the table and buttons, and @ebay/nice-modal-react to manage the UserInfoModal.

```jsx
import { useMemo, useCallback, useState } from 'react';
import { Button, Table } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { useModal } from '@ebay/nice-modal-react';
import UserInfoModal from './UserInfoModal';
import mockData from './mock';

export default function UserList() {
  const userModal = useModal(UserInfoModal);
  const [users, setUsers] = useState(mockData);

  const handleNewUser = useCallback(() => {
    userModal.show().then((newUser) => {
      setUsers([newUser, ...users]);
    });
  }, [userModal, users]);

  const handleEditUser = useCallback(
    (user) => {
      userModal.show({ user }).then((newUser) => {
        setUsers((users) => {
          // Modify users immutablly
          const i = users.findIndex((u) => u.id === newUser.id);
          const updated = { ...users[i], ...newUser };
          const arr = [...users];
          arr.splice(i, 1, updated);
          return arr;
        });
      });
    },
    [userModal],
  );

  const columns = useMemo(
    () => [
      {
        title: 'Name',
        dataIndex: 'name',
        width: '150px',
      },
      {
        title: 'Job Title',
        dataIndex: 'job',
      },
      {
        title: 'Edit',
        width: '100px',
        render(value, user) {
          return (
            <Button
              type="link"
              icon={<EditOutlined />}
              onClick={() => {
                handleEditUser(user);
              }}
            />
          );
        },
      },
    ],
    [handleEditUser],
  );

  return (
    <div>
      <Button type="primary" onClick={handleNewUser}>
        + New User
      </Button>
      <Table
        size="small"
        rowKey="id"
        pagination={false}
        columns={columns}
        dataSource={users}
        style={{ marginTop: '20px' }}
      />
    </div>
  );
}

```

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

### Create and Edit User Form Modal with Ant Design

Source: https://ebay.github.io/nice-modal-react

This modal component, designed for use with @ebay/nice-modal-react and Ant Design, provides a form for creating or editing user information. It utilizes antd-form-builder for dynamic form generation and handles form submission and resolution.

```jsx
import { useCallback } from 'react';
import { Form, Modal } from 'antd';
import FormBuilder from 'antd-form-builder';
import NiceModal, { useModal, antdModal } from '@ebay/nice-modal-react';

export default NiceModal.create(({ user }) => {
  const modal = useModal();
  const [form] = Form.useForm();
  const meta = {
    initialValues: user,
    fields: [
      { key: 'name', label: 'Name', required: true },
      { key: 'job', label: 'Job Title', required: true },
    ],
  };

  const handleSubmit = useCallback(() => {
    form.validateFields().then(() => {
      const newUser = { ...form.getFieldsValue() };
      // In real case, you may call API to create user or update user
      if (!user) {
        newUser.id = String(Date.now());
      } else {
        newUser.id = user.id;
      }
      modal.resolve(newUser);
      modal.hide();
    });
  }, [modal, user, form]);
  return (
    <Modal
      {...antdModal(modal)}
      title={user ? 'Edit User' : 'New User'}
      okText={user ? 'Update' : 'Create'}
      onOk={handleSubmit}
    >
      <Form form={form}>
        <FormBuilder meta={meta} form={form} />
      </Form>
    </Modal>
  );
});

```
Tokens:
Raw