Access data provider in child component

import { useDataProvider } from "@refinedev/core";  

const dataProvider = useDataProvider();  

const defaultDataProvider = dataProvider(); // return default data provider  
const secondDataProvider = dataProvider("second"); // return second data provider  

import { useDataProvider } from "@refinedev/core";  

const dataProvider = useDataProvider();  

const defaultDataProvider = dataProvider(); // return default data provider  
const secondDataProvider = dataProvider("second"); // return second data provider  

import { useApiUrl } from "@refinedev/core";  

const apiUrl = useApiUrl();

import { useApiUrl } from "@refinedev/core";  

const apiUrl = useApiUrl();

import { useTheme } from "@chakra-ui/react";  

export const ThemeComp = () => {  
 const theme = useTheme();  
 // Now you can use the theme object
};

import { useTheme } from "@chakra-ui/react";  

export const ThemeComp = () => {  
 const theme = useTheme();  
 // Now you can use the theme object
};

import { useTheme } from "@mui/material/styles";

export const MyComponent = () => {
  const theme = useTheme();
  // Now you can use the theme object
};

import { useTheme } from "@mui/material/styles";

export const MyComponent = () => {
  const theme = useTheme();
  // Now you can use the theme object
};

import { useContext } from 'react';
import { ConfigContext } from 'antd';

const MyComponent = () => {
  const { theme } = useContext(ConfigContext);
  // Now you can use the theme object
};

import { useContext } from 'react';
import { ConfigContext } from 'antd';

const MyComponent = () => {
  const { theme } = useContext(ConfigContext);
  // Now you can use the theme object
};

import { useState } from 'react';
import { Upload, Button, Form } from 'antd';

export const MyForm = () => {
  const [showUpload, setShowUpload] = useState(false);

  return (
    <Form>
      {/* Other form items... */}
      <Form.Item>
        <Button type="primary" onClick={() => setShowUpload(true)}>
          Upload Image
        </Button>
      </Form.Item>
      {showUpload && (
        <Form.Item name="image" valuePropName="fileList">
          <Upload.Dragger name="file" action="/upload">
            <p className="ant-upload-text">Drag & drop a file in this area</p>
          </Upload.Dragger>
        </Form.Item>
      )}
    </Form>
  );
};

import { useState } from 'react';
import { Upload, Button, Form } from 'antd';

export const MyForm = () => {
  const [showUpload, setShowUpload] = useState(false);

  return (
    <Form>
      {/* Other form items... */}
      <Form.Item>
        <Button type="primary" onClick={() => setShowUpload(true)}>
          Upload Image
        </Button>
      </Form.Item>
      {showUpload && (
        <Form.Item name="image" valuePropName="fileList">
          <Upload.Dragger name="file" action="/upload">
            <p className="ant-upload-text">Drag & drop a file in this area</p>
          </Upload.Dragger>
        </Form.Item>
      )}
    </Form>
  );
};

import { useCheckboxGroup } from "@refinedev/antd";  
import { Form, Checkbox } from "antd";  
  
export const PostCreate: React.FC = () => {  
 const { checkboxGroupProps } = useCheckboxGroup<ITag>({  
 resource: "tags",  
 });  
  
 return (  
 <Form>  
 <Form.Item label="Tags" name="tags">  
 <Checkbox.Group {...checkboxGroupProps} />  
 </Form.Item>  
 </Form>  
 );  
};  
  
interface ITag {  
 id: number;  
 title: string;  
}  

import { useCheckboxGroup } from "@refinedev/antd";  
import { Form, Checkbox } from "antd";  
  
export const PostCreate: React.FC = () => {  
 const { checkboxGroupProps } = useCheckboxGroup<ITag>({  
 resource: "tags",  
 });  
  
 return (  
 <Form>  
 <Form.Item label="Tags" name="tags">  
 <Checkbox.Group {...checkboxGroupProps} />  
 </Form.Item>  
 </Form>  
 );  
};  
  
interface ITag {  
 id: number;  
 title: string;  
}  

import { Select, Form } from "antd";

const { Option } = Select;

export const MyForm = () => (
  <Form>
    {/* Other form items... */}
    <Form.Item name="tags" label="Tags">
      <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode">
        {/* You can render <Option /> components here */}
      </Select>
    </Form.Item>
  </Form>
);

import { Select, Form } from "antd";

const { Option } = Select;

export const MyForm = () => (
  <Form>
    {/* Other form items... */}
    <Form.Item name="tags" label="Tags">
      <Select mode="tags" style={{ width: '100%' }} placeholder="Tags Mode">
        {/* You can render <Option /> components here */}
      </Select>
    </Form.Item>
  </Form>
);

<Form.List name={'intervals'}>
  {(fields, { add, remove }) => (
    <>
      <Title level={5}>Stimulation Intervals</Title>
      {fields.map((field, index) => (
        <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {...field}
            name={[field.name, 'from']}
            fieldKey={[field.fieldKey, 'from']}
            rules={[{ required: true, message: 'Missing "from" value' }]}
          >
            <Input placeholder="From" />
          </Form.Item>
          <Form.Item
            {...field}
            name={[field.name, 'to']}
            fieldKey={[field.fieldKey, 'to']}
            rules={[{ required: true, message: 'Missing "to" value' }]}
          >
            <Input placeholder="To" />
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(field.name)} />
        </Space>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}
</Form.List>

<Form.List name={'intervals'}>
  {(fields, { add, remove }) => (
    <>
      <Title level={5}>Stimulation Intervals</Title>
      {fields.map((field, index) => (
        <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
          <Form.Item
            {...field}
            name={[field.name, 'from']}
            fieldKey={[field.fieldKey, 'from']}
            rules={[{ required: true, message: 'Missing "from" value' }]}
          >
            <Input placeholder="From" />
          </Form.Item>
          <Form.Item
            {...field}
            name={[field.name, 'to']}
            fieldKey={[field.fieldKey, 'to']}
            rules={[{ required: true, message: 'Missing "to" value' }]}
          >
            <Input placeholder="To" />
          </Form.Item>
          <MinusCircleOutlined onClick={() => remove(field.name)} />
        </Space>
      ))}
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
          Add field
        </Button>
      </Form.Item>
    </>
  )}
</Form.List>

useForm({  
 warnWhenUnsavedChanges: true,  
});  

useForm({  
 warnWhenUnsavedChanges: true,  
});  

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: true,  
});  

const modalForm = useModalForm({  
 warnWhenUnsavedChanges: true,  
});  

<Refine warnWhenUnsavedChanges={true} />

<Refine warnWhenUnsavedChanges={true} />

import { useForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const { form, formProps, saveButtonProps } = useForm();

  const handleOnFinish = (values) => {
    if (!form.isFieldsTouched()) {
      // No fields have been touched, don't submit the form
      return;
    }

    // Fields have been touched, submit the form
    saveButtonProps.onClick();
  };

  return (
    <Form {...formProps} onFinish={handleOnFinish}>
      {/* Form items... */}
      <Form.Item>
        <Button {...saveButtonProps}>Save</Button>
      </Form.Item>
    </Form>
  );
};

import { useForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const { form, formProps, saveButtonProps } = useForm();

  const handleOnFinish = (values) => {
    if (!form.isFieldsTouched()) {
      // No fields have been touched, don't submit the form
      return;
    }

    // Fields have been touched, submit the form
    saveButtonProps.onClick();
  };

  return (
    <Form {...formProps} onFinish={handleOnFinish}>
      {/* Form items... */}
      <Form.Item>
        <Button {...saveButtonProps}>Save</Button>
      </Form.Item>
    </Form>
  );
};

form.setFieldsValue({{ fieldName: value }});
form.touchField('fieldName');

form.setFieldsValue({{ fieldName: value }});
form.touchField('fieldName');

import { useState } from 'react';
import { useForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const { form, formProps, saveButtonProps } = useForm();
  const [isModified, setIsModified] = useState(false);

  const handleOnFinish = (values) => {
    if (!isModified && !form.isFieldsTouched()) {
      // No fields have been touched or modified, don't submit the form
      return;
    }

    // Fields have been touched or modified, submit the form
    saveButtonProps.onClick();
  };

  // When you set the field value manually
  const setFieldValue = (fieldName, value) => {
    form.setFieldsValue({ [fieldName]: value });
    setIsModified(true);  // Mark the form as modified
  };

  return (
    <Form {...formProps} onFinish={handleOnFinish}>
      {/* Form items... */}
      <Form.Item>
        <Button {...saveButtonProps}>Save</Button>
      </Form.Item>
    </Form>
  );
};

import { useState } from 'react';
import { useForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const { form, formProps, saveButtonProps } = useForm();
  const [isModified, setIsModified] = useState(false);

  const handleOnFinish = (values) => {
    if (!isModified && !form.isFieldsTouched()) {
      // No fields have been touched or modified, don't submit the form
      return;
    }

    // Fields have been touched or modified, submit the form
    saveButtonProps.onClick();
  };

  // When you set the field value manually
  const setFieldValue = (fieldName, value) => {
    form.setFieldsValue({ [fieldName]: value });
    setIsModified(true);  // Mark the form as modified
  };

  return (
    <Form {...formProps} onFinish={handleOnFinish}>
      {/* Form items... */}
      <Form.Item>
        <Button {...saveButtonProps}>Save</Button>
      </Form.Item>
    </Form>
  );
};

import { useForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const { form, formProps, saveButtonProps } = useForm();

  const handleOnFinish = (values) => {
    // Submit the form
    saveButtonProps.onClick();
  };

  return (
    <Form {...formProps} onFinish={handleOnFinish}>
      {/* Form items... */}
      <Form.Item>
        <Button {...saveButtonProps}>Save</Button>
      </Form.Item>
      <div>
        <h3>Current Form Values:</h3>
        <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
      </div>
    </Form>
  );
};

import { useForm } from "@pankod/refine";
import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const { form, formProps, saveButtonProps } = useForm();

  const handleOnFinish = (values) => {
    // Submit the form
    saveButtonProps.onClick();
  };

  return (
    <Form {...formProps} onFinish={handleOnFinish}>
      {/* Form items... */}
      <Form.Item>
        <Button {...saveButtonProps}>Save</Button>
      </Form.Item>
      <div>
        <h3>Current Form Values:</h3>
        <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
      </div>
    </Form>
  );
};

import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const validateIcon = (_, value) => {
    return new Promise((resolve, reject) => {
      form.validateFields(['icon', 'remoteIcon'])
        .then(() => {
          resolve();
        })
        .catch(() => {
          if (!value) {
            reject('At least one icon is required');
          } else {
            resolve();
          }
        });
    });
  };

  return (
    <Form>
      <Form.Item
        name="icon"
        rules={[{ validator: validateIcon }]}
      >
        <Input placeholder="Icon" />
      </Form.Item>
      <Form.Item
        name="remoteIcon"
        rules={[{ validator: validateIcon }]}
      >
        <Input placeholder="Remote Icon" />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const validateIcon = (_, value) => {
    return new Promise((resolve, reject) => {
      form.validateFields(['icon', 'remoteIcon'])
        .then(() => {
          resolve();
        })
        .catch(() => {
          if (!value) {
            reject('At least one icon is required');
          } else {
            resolve();
          }
        });
    });
  };

  return (
    <Form>
      <Form.Item
        name="icon"
        rules={[{ validator: validateIcon }]}
      >
        <Input placeholder="Icon" />
      </Form.Item>
      <Form.Item
        name="remoteIcon"
        rules={[{ validator: validateIcon }]}
      >
        <Input placeholder="Remote Icon" />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const [form] = Form.useForm();

  const validateIcon = (_, value) => {
    const values = form.getFieldsValue();
    if (!values.icon && !values.remoteIcon) {
      return Promise.reject('At least one icon is required');
    }
    return Promise.resolve();
  };

  return (
    <Form form={form}>
      <Form.Item
        name="icon"
        rules={[{ validator: validateIcon }]}
      >
        <Input placeholder="Icon" />
      </Form.Item>
      <Form.Item
        name="remoteIcon"
        rules={[{ validator: validateIcon }]}
      >
        <Input placeholder="Remote Icon" />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

import { Form, Input, Button } from "antd";

export const MyForm = () => {
  const [form] = Form.useForm();

  const validateIcon = (_, value) => {
    const values = form.getFieldsValue();
    if (!values.icon && !values.remoteIcon) {
      return Promise.reject('At least one icon is required');
    }
    return Promise.resolve();
  };

  return (
    <Form form={form}>
      <Form.Item
        name="icon"
        rules={[{ validator: validateIcon }]}
      >
        <Input placeholder="Icon" />
      </Form.Item>
      <Form.Item
        name="remoteIcon"
        rules={[{ validator: validateIcon }]}
      >
        <Input placeholder="Remote Icon" />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

import {{ Table }} from "antd";

const columns = [
  {
    title: "Icon",
    dataIndex: "icon",
    render: (icon, record) => {
      // You can access both "icon" and "remoteIcon" here
      const remoteIcon = record.remoteIcon;

      // Execute your custom logic here...

      return /* Your custom JSX... */;
    },
  },
  // Other columns...
];

export const MyTable = () => (
  <Table columns={{columns}} dataSource={{/* Your data source... */}} />
);

import {{ Table }} from "antd";

const columns = [
  {
    title: "Icon",
    dataIndex: "icon",
    render: (icon, record) => {
      // You can access both "icon" and "remoteIcon" here
      const remoteIcon = record.remoteIcon;

      // Execute your custom logic here...

      return /* Your custom JSX... */;
    },
  },
  // Other columns...
];

export const MyTable = () => (
  <Table columns={{columns}} dataSource={{/* Your data source... */}} />
);

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";  
import "./App.css"; // Import your custom CSS file

const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Sider={() => (  
 <ThemedSiderV2 className="custom-sider" /> // Apply the custom CSS class
 )}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};  

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";  
import "./App.css"; // Import your custom CSS file

const App: React.FC = () => {  
 return (  
 <Refine  
 // ...  
 >  
 <ThemedLayoutV2  
 Sider={() => (  
 <ThemedSiderV2 className="custom-sider" /> // Apply the custom CSS class
 )}  
 >  
 {/* ... */}  
 </ThemedLayoutV2>  
 </Refine>  
 );  
};  

.custom-sider {
  width: 300px !important; // Set the width as needed
}

.custom-sider {
  width: 300px !important; // Set the width as needed
}

import { Refine, ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/core";

const App: React.FC = () => {
  return (
    <Refine>
      <ThemedLayoutV2
        Sider={() => (
          <ThemedSiderV2 fixed />
        )}
      >
        {/* ... */}
      </ThemedLayoutV2>
    </Refine>
  );
};

import { Refine, ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/core";

const App: React.FC = () => {
  return (
    <Refine>
      <ThemedLayoutV2
        Sider={() => (
          <ThemedSiderV2 fixed />
        )}
      >
        {/* ... */}
      </ThemedLayoutV2>
    </Refine>
  );
};

import {{ Icon }} from "@ant-design/compatible";
import BreathIcon from "./BreathIcon"; // Import your custom SVG icon

// Your custom SVG icon component
const CustomIcon = props => (
  <Icon
    component={BreathIcon}
    {...props}
    style={{ ...props.style, fill: "currentColor" }}
  />
);

// In your resources
resources={[
  {
    // ...
    meta: {
      // ...
      icon: <CustomIcon />,
    },
  },
]}

import {{ Icon }} from "@ant-design/compatible";
import BreathIcon from "./BreathIcon"; // Import your custom SVG icon

// Your custom SVG icon component
const CustomIcon = props => (
  <Icon
    component={BreathIcon}
    {...props}
    style={{ ...props.style, fill: "currentColor" }}
  />
);

// In your resources
resources={[
  {
    // ...
    meta: {
      // ...
      icon: <CustomIcon />,
    },
  },
]}

<Refine {...} options={{ syncWithLocation: true }}>  
  // Your code here...
</Refine>

<Refine {...} options={{ syncWithLocation: true }}>  
  // Your code here...
</Refine>

/my-products  

/my-products  

const { ... } = useTable(  
 {  
 current: 1,  
 pageSize: 2,  
 filters: { initial: [{ field: "category.id", operator: "eq", value: 1 }]},  
 sorters: { initial: [{ field: "id", direction: "asc" }] }  
 }  
);  

const { ... } = useTable(  
 {  
 current: 1,  
 pageSize: 2,  
 filters: { initial: [{ field: "category.id", operator: "eq", value: 1 }]},  
 sorters: { initial: [{ field: "id", direction: "asc" }] }  
 }  
);  

/my-products?current=1&pageSize=2&sorters[0][field]=id&sorters[0][order]=asc&filters[0][field]=category.id&filters[0][operator]=eq&filters[0][value]=1  

/my-products?current=1&pageSize=2&sorters[0][field]=id&sorters[0][order]=asc&filters[0][field]=category.id&filters[0][operator]=eq&filters[0][value]=1  

type UndoableNotification = {  
 message: string;  
 cancelMutation?: () => void;  
 closeToast?: () => void;  
};  
  
export const UndoableNotification: React.FC<UndoableNotification> = ({  
 closeToast,  
 cancelMutation,  
 message,  
}) => {  
 return (  
 <div>  
 <p>{message}</p>  
 <button  
 onClick={() => {  
 cancelMutation?.();  
 closeToast?.();  
 }}  
 >  
 Undo  
 </button>  
 </div>  
 );  
};

type UndoableNotification = {  
 message: string;  
 cancelMutation?: () => void;  
 closeToast?: () => void;  
};  
  
export const UndoableNotification: React.FC<UndoableNotification> = ({  
 closeToast,  
 cancelMutation,  
 message,  
}) => {  
 return (  
 <div>  
 <p>{message}</p>  
 <button  
 onClick={() => {  
 cancelMutation?.();  
 closeToast?.();  
 }}  
 >  
 Undo  
 </button>  
 </div>  
 );  
};

<DeleteButton
  size="small"
  recordItemId={{`${{id}}`}}
  hideText
  mutationMode="undoable"
  successNotification={{
    message: 'Successfully deleted a Breathing Session',
    type: 'success',
  }}
/>

<DeleteButton
  size="small"
  recordItemId={{`${{id}}`}}
  hideText
  mutationMode="undoable"
  successNotification={{
    message: 'Successfully deleted a Breathing Session',
    type: 'success',
  }}
/>

<DeleteButton
  size="small"
  recordItemId={{`${{id}}`}}
  hideText
  mutationMode="undoable"
  successNotification={{
    message: 'Successfully deleted a Breathing Session',
    type: 'success',
  }}
/>

<DeleteButton
  size="small"
  recordItemId={{`${{id}}`}}
  hideText
  mutationMode="undoable"
  successNotification={{
    message: 'Successfully deleted a Breathing Session',
    type: 'success',
  }}
/>

type UndoableNotification = {  
 message: string;  
 cancelMutation?: () => void;  
 closeToast?: () => void;  
};  
  
export const UndoableNotification: React.FC<UndoableNotification> = ({  
 closeToast,  
 cancelMutation,  
 message,  
}) => {  
 return (  
 <div>  
 <p>{message}</p>  
 <button  
 onClick={() => {  
 cancelMutation?.();  
 closeToast?.();  
 }}  
 >  
 Undo  
 </button>  
 </div>  
 );  
};

type UndoableNotification = {  
 message: string;  
 cancelMutation?: () => void;  
 closeToast?: () => void;  
};  
  
export const UndoableNotification: React.FC<UndoableNotification> = ({  
 closeToast,  
 cancelMutation,  
 message,  
}) => {  
 return (  
 <div>  
 <p>{message}</p>  
 <button  
 onClick={() => {  
 cancelMutation?.();  
 closeToast?.();  
 }}  
 >  
 Undo  
 </button>  
 </div>  
 );  
};