notifciaton

import { useNotificationProvider } from "@refinedev/antd";  

return (  
 <Refine  
 //...  
 notificationProvider={useNotificationProvider}  
 />  
);  

import { useNotificationProvider } from "@refinedev/antd";  

return (  
 <Refine  
 //...  
 notificationProvider={useNotificationProvider}  
 />  
);  

interface NotificationProvider {  
 open: (params: OpenNotificationParams) => void;  
 close: (key: string) => void;  
}  
  
interface OpenNotificationParams {  
 key?: string;  
 message: string;  
 type: "success" | "error" | "progress";  
 description?: string;  
 cancelMutation?: () => void;  
 undoableTimeout?: number;  
}  
  
const notificationProvider: NotificationProvider = {  
 open: () => {},  
 close: () => {},  
};  

interface NotificationProvider {  
 open: (params: OpenNotificationParams) => void;  
 close: (key: string) => void;  
}  
  
interface OpenNotificationParams {  
 key?: string;  
 message: string;  
 type: "success" | "error" | "progress";  
 description?: string;  
 cancelMutation?: () => void;  
 undoableTimeout?: number;  
}  
  
const notificationProvider: NotificationProvider = {  
 open: () => {},  
 close: () => {},  
};  

import { Refine, NotificationProvider } from "@refinedev/core";  
  
const App = () => {  
 return (  
 <Refine  
 notificationProvider={notificationProvider}  
 /* ... */  
 >  
 {/* ... */}  
 </Refine>  
 );  
};  

import { Refine, NotificationProvider } from "@refinedev/core";  
  
const App = () => {  
 return (  
 <Refine  
 notificationProvider={notificationProvider}  
 /* ... */  
 >  
 {/* ... */}  
 </Refine>  
 );  
};  

interface OpenNotificationParams {  
 key?: string;  
 message: string;  
 type: "success" | "error" | "progress";  
 description?: string;  
 cancelMutation?: () => void;  
 undoableTimeout?: number;  
}  

interface OpenNotificationParams {  
 key?: string;  
 message: string;  
 type: "success" | "error" | "progress";  
 description?: string;  
 cancelMutation?: () => void;  
 undoableTimeout?: number;  
}  

notificationProvider.open({
  message: serverResponse.errorMessage,
  type: "error",
});

notificationProvider.open({
  message: serverResponse.errorMessage,
  type: "error",
});

npm install @refinedev/core@latest

npm install @refinedev/core@latest

const { notification } = useNotification();

// Trigger a notification
notification.show({
  message: "Custom notification",
  type: "success",
});

const { notification } = useNotification();

// Trigger a notification
notification.show({
  message: "Custom notification",
  type: "success",
});

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Post Successfully created with ${data.title}`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});  

useForm({  
 successNotification: (data, values, resource) => {  
 return {  
 message: `Post Successfully created with ${data.title}`,  
 description: "Success with no errors",  
 type: "success",  
 };  
 },  
});  

import { useNotificationProvider } from "@refinedev/mui";  
  
return (  
 <Refine  
 //...  
 notificationProvider={useNotificationProvider}  
 />  
);  

import { useNotificationProvider } from "@refinedev/mui";  
  
return (  
 <Refine  
 //...  
 notificationProvider={useNotificationProvider}  
 />  
);  

useForm({{  
 successNotification: (data, values, resource) => {{  
 return {{  
 message: `Post Successfully created with ${{data.title}}`,  
 description: "Success with no errors",  
 type: "success",  
 }};  
 }},  
}});  

useForm({{  
 successNotification: (data, values, resource) => {{  
 return {{  
 message: `Post Successfully created with ${{data.title}}`,  
 description: "Success with no errors",  
 type: "success",  
 }};  
 }},  
}});  

import {{ useNotificationProvider }} from "@refinedev/mui";  
  
return (  
 <Refine  
 //...  
 notificationProvider={{useNotificationProvider}}  
 />  
);  

import {{ useNotificationProvider }} from "@refinedev/mui";  
  
return (  
 <Refine  
 //...  
 notificationProvider={{useNotificationProvider}}  
 />  
);  

useForm({  
 errorNotification: (error, values, resource) => {  
 return {  
 message: `Failed to create ${values.title}`,  
 description: error.message,  
 type: "error",  
 };  
 },  
});  

useForm({  
 errorNotification: (error, values, resource) => {  
 return {  
 message: `Failed to create ${values.title}`,  
 description: error.message,  
 type: "error",  
 };  
 },  
});  

import { useNotificationProvider } from "@refinedev/mui";  
  
return (  
 <Refine  
 //...  
 notificationProvider={useNotificationProvider}  
 />  
);  

import { useNotificationProvider } from "@refinedev/mui";  
  
return (  
 <Refine  
 //...  
 notificationProvider={useNotificationProvider}  
 />  
);  

TS2345: Argument of type '{ errorNotification: (error: any, values: any, resource: any) => { message: string; description: any; type: string; }; }' is not assignable to parameter of type 'UseFormProps<BaseRecord, HttpError, FieldValues, {}>'.
  Object literal may only specify known properties, and 'errorNotification' does not exist in type 'UseFormProps<BaseRecord, HttpError, FieldValues, {}>'.

TS2345: Argument of type '{ errorNotification: (error: any, values: any, resource: any) => { message: string; description: any; type: string; }; }' is not assignable to parameter of type 'UseFormProps<BaseRecord, HttpError, FieldValues, {}>'.
  Object literal may only specify known properties, and 'errorNotification' does not exist in type 'UseFormProps<BaseRecord, HttpError, FieldValues, {}>'.

import { useForm, useNotification } from "@pankod/refine";

const { formProps, saveButtonProps } = useForm<MyResource>();

const { notification } = useNotification();

const onSubmit = async (values: MyResource) => {
  try {
    // Replace this with your actual API request
    const response = await myApiRequest(values);

    notification.success({
      message: `Post Successfully created with ${response.data.title}`,
    });
  } catch (error) {
    notification.error({
      message: `Failed to create ${values.title}`,
      description: error.message,
    });
  }
};

return (
  <Form {...formProps} onFinish={onSubmit}>
    {/* form fields here */}
    <SaveButton {...saveButtonProps} />
  </Form>
);

import { useForm, useNotification } from "@pankod/refine";

const { formProps, saveButtonProps } = useForm<MyResource>();

const { notification } = useNotification();

const onSubmit = async (values: MyResource) => {
  try {
    // Replace this with your actual API request
    const response = await myApiRequest(values);

    notification.success({
      message: `Post Successfully created with ${response.data.title}`,
    });
  } catch (error) {
    notification.error({
      message: `Failed to create ${values.title}`,
      description: error.message,
    });
  }
};

return (
  <Form {...formProps} onFinish={onSubmit}>
    {/* form fields here */}
    <SaveButton {...saveButtonProps} />
  </Form>
);

import { useForm, useNotification } from "@pankod/refine";

const { formProps, saveButtonProps } = useForm<MyResource>();

const { notification } = useNotification();

const onSubmit = async (values: MyResource) => {
    try {
        // Replace this with your actual API request
        const response = await myApiRequest(values);

        // If the request is successful, show a success notification
        notification.success({
            message: `Post Successfully created with ${response.data.title}`,
        });
    } catch (error) {
        // If the request fails, show an error notification with the server message
        notification.error({
            message: error.response.data.message,
        });
    }
};

return (
    <Form {...formProps} onFinish={onSubmit}>
        {/* form fields here */}
        <SaveButton {...saveButtonProps} />
    </Form>
);

import { useForm, useNotification } from "@pankod/refine";

const { formProps, saveButtonProps } = useForm<MyResource>();

const { notification } = useNotification();

const onSubmit = async (values: MyResource) => {
    try {
        // Replace this with your actual API request
        const response = await myApiRequest(values);

        // If the request is successful, show a success notification
        notification.success({
            message: `Post Successfully created with ${response.data.title}`,
        });
    } catch (error) {
        // If the request fails, show an error notification with the server message
        notification.error({
            message: error.response.data.message,
        });
    }
};

return (
    <Form {...formProps} onFinish={onSubmit}>
        {/* form fields here */}
        <SaveButton {...saveButtonProps} />
    </Form>
);

import { useForm, useNotification } from "@pankod/refine";

const { notification } = useNotification();

const { formProps, saveButtonProps } = useForm<MyResource>({
    onSuccess: (data) => {
        // The server response is available in the `data` parameter
        // You can use it to display a success notification
        notification.success({
            message: `Post Successfully created with ${data.title}`,
        });
    },
    onFailure: (error) => {
        // The server error is available in the `error` parameter
        // You can use it to display an error notification
        notification.error({
            message: error.message,
        });
    },
});

return (
    <Form {...formProps}>
        {/* form fields here */}
        <SaveButton {...saveButtonProps} />
    </Form>
);

import { useForm, useNotification } from "@pankod/refine";

const { notification } = useNotification();

const { formProps, saveButtonProps } = useForm<MyResource>({
    onSuccess: (data) => {
        // The server response is available in the `data` parameter
        // You can use it to display a success notification
        notification.success({
            message: `Post Successfully created with ${data.title}`,
        });
    },
    onFailure: (error) => {
        // The server error is available in the `error` parameter
        // You can use it to display an error notification
        notification.error({
            message: error.message,
        });
    },
});

return (
    <Form {...formProps}>
        {/* form fields here */}
        <SaveButton {...saveButtonProps} />
    </Form>
);

formState: { errors },

formState: { errors },

const {  
    formState: { errors },
    register,
} = useForm();

return (
    <Form {{...formProps}}>
        <input {...register("title", { required: true })} />
        {errors.title && <span>This field is required</span>}
        <SaveButton {{...saveButtonProps}} />
    </Form>
);

const {  
    formState: { errors },
    register,
} = useForm();

return (
    <Form {{...formProps}}>
        <input {...register("title", { required: true })} />
        {errors.title && <span>This field is required</span>}
        <SaveButton {{...saveButtonProps}} />
    </Form>
);

import {{ useForm, useNotification }} from "@pankod/refine";

const {{ notification }} = useNotification();

const {{ formProps, saveButtonProps }} = useForm<MyResource>({{
    onSuccess: (data) => {{
        // The server response is available in the `data` parameter
        // You can use it to display a success notification
        notification.success({{
            message: `Post Successfully created with ${{data.title}}`,
        }});
    }},
    onFailure: (error) => {{
        // The server error is available in the `error` parameter
        // You can use it to display an error notification
        notification.error({{
            message: error.message,
        }});
    }},
}});

return (
    <Form {{...formProps}}>
        {{/* form fields here */}}
        <SaveButton {{...saveButtonProps}} />
    </Form>
);

import {{ useForm, useNotification }} from "@pankod/refine";

const {{ notification }} = useNotification();

const {{ formProps, saveButtonProps }} = useForm<MyResource>({{
    onSuccess: (data) => {{
        // The server response is available in the `data` parameter
        // You can use it to display a success notification
        notification.success({{
            message: `Post Successfully created with ${{data.title}}`,
        }});
    }},
    onFailure: (error) => {{
        // The server error is available in the `error` parameter
        // You can use it to display an error notification
        notification.error({{
            message: error.message,
        }});
    }},
}});

return (
    <Form {{...formProps}}>
        {{/* form fields here */}}
        <SaveButton {{...saveButtonProps}} />
    </Form>
);

import { useForm } from "@refinedev/react-hook-form";  

const { formProps, saveButtonProps } = useForm<MyResource>();

import { useForm } from "@refinedev/react-hook-form";  

const { formProps, saveButtonProps } = useForm<MyResource>();

import { useForm } from "react-hook-form";

const { register, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data) => console.log(data);

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register("example", { required: true })} />
    {errors.example && <span>This field is required</span>}
    <input type="submit" />
  </form>
);

import { useForm } from "react-hook-form";

const { register, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data) => console.log(data);

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register("example", { required: true })} />
    {errors.example && <span>This field is required</span>}
    <input type="submit" />
  </form>
);

import { useForm } from "react-hook-form";

const { register, handleSubmit } = useForm();

const onSubmit = async (data) => {
  try {
    // Replace this with your actual API request
    const response = await myApiRequest(data);

    // The server response is available in the `response` variable
    console.log(response);
  } catch (error) {
    // The server error is available in the `error` variable
    console.log(error);
  }
};

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    {/* form fields here */}
    <input type="submit" />
  </form>
);

import { useForm } from "react-hook-form";

const { register, handleSubmit } = useForm();

const onSubmit = async (data) => {
  try {
    // Replace this with your actual API request
    const response = await myApiRequest(data);

    // The server response is available in the `response` variable
    console.log(response);
  } catch (error) {
    // The server error is available in the `error` variable
    console.log(error);
  }
};

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    {/* form fields here */}
    <input type="submit" />
  </form>
);