fair-rose•4mo ago

Toster translations

hi i'd love to create translations for notifications and all other default refine text but i cant find keys that i need to set in my i18n resources

5 Replies

kapa.ai•4mo ago

Hi @danyalutsevich. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create translations for notifications and other default Refine text, you need to set the appropriate keys in your i18n resources. Here are the steps and the keys you need to include in your translation files: Notification Keys Refine uses specific keys for notifications, which you can override in your i18n provider. Here are the keys you need to include in your translation files:

{
  "notifications": {
    "success": "Successful",
    "error": "Error (status code: {{statusCode}})",
    "undoable": "You have {{seconds}} seconds to undo",
    "createSuccess": "Successfully created {{resource}}",
    "createError": "There was an error creating {{resource}} (status code: {{statusCode}})",
    "deleteSuccess": "Successfully deleted {{resource}}",
    "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})",
    "editSuccess": "Successfully edited {{resource}}",
    "editError": "Error when editing {{resource}} (status code: {{statusCode}})",
    "importProgress": "Importing: {{processed}}/{{total}}"
  }
}

{
  "notifications": {
    "success": "Successful",
    "error": "Error (status code: {{statusCode}})",
    "undoable": "You have {{seconds}} seconds to undo",
    "createSuccess": "Successfully created {{resource}}",
    "createError": "There was an error creating {{resource}} (status code: {{statusCode}})",
    "deleteSuccess": "Successfully deleted {{resource}}",
    "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})",
    "editSuccess": "Successfully edited {{resource}}",
    "editError": "Error when editing {{resource}} (status code: {{statusCode}})",
    "importProgress": "Importing: {{processed}}/{{total}}"
  }
}

Source (https://refine.dev/docs/guides-concepts/notifications/#notification-providers) Other Default Text Keys For other default texts, such as those used in login, registration, and password update pages, you can use the following keys:

{
  "pages": {
    "login": {
      "title": "Sign in to your account",
      "signin": "Sign in",
      "signup": "Sign up",
      "divider": "or",
      "fields": {
        "email": "Email",
        "password": "Password"
      },
      "errors": {
        "validEmail": "Invalid email address",
        "requiredEmail": "Email is required",
        "requiredPassword": "Password is required"
      },
      "buttons": {
        "submit": "Login",
        "forgotPassword": "Forgot password?",
        "noAccount": "Don’t have an account?",
        "rememberMe": "Remember me"
      }
    },
    "forgotPassword": {
      "title": "Forgot your password?",
      "fields": {
        "email": "Email"
      },
      "errors": {
        "validEmail": "Invalid email address",
        "requiredEmail": "Email is required"
      },
      "buttons": {
        "submit": "Send reset instructions"
      }
    },
    "register": {
      "title": "Sign up for your account",
      "fields": {
        "email": "Email",
        "password": "Password"
      },
      "errors": {
        "validEmail": "Invalid email address",
        "requiredEmail": "Email is required",
        "requiredPassword": "Password is required"
      },
      "buttons": {
        "submit": "Register",
        "haveAccount": "Have an account?"
      }
    },
    "updatePassword": {
      "title": "Update password",
      "fields": {
        "password": "New Password",
        "confirmPassword": "Confirm new password"
      },
      "errors": {
        "confirmPasswordNotMatch": "Passwords do not match"
      }
    }
  }
}

{
  "pages": {
    "login": {
      "title": "Sign in to your account",
      "signin": "Sign in",
      "signup": "Sign up",
      "divider": "or",
      "fields": {
        "email": "Email",
        "password": "Password"
      },
      "errors": {
        "validEmail": "Invalid email address",
        "requiredEmail": "Email is required",
        "requiredPassword": "Password is required"
      },
      "buttons": {
        "submit": "Login",
        "forgotPassword": "Forgot password?",
        "noAccount": "Don’t have an account?",
        "rememberMe": "Remember me"
      }
    },
    "forgotPassword": {
      "title": "Forgot your password?",
      "fields": {
        "email": "Email"
      },
      "errors": {
        "validEmail": "Invalid email address",
        "requiredEmail": "Email is required"
      },
      "buttons": {
        "submit": "Send reset instructions"
      }
    },
    "register": {
      "title": "Sign up for your account",
      "fields": {
        "email": "Email",
        "password": "Password"
      },
      "errors": {
        "validEmail": "Invalid email address",
        "requiredEmail": "Email is required",
        "requiredPassword": "Password is required"
      },
      "buttons": {
        "submit": "Register",
        "haveAccount": "Have an account?"
      }
    },
    "updatePassword": {
      "title": "Update password",
      "fields": {
        "password": "New Password",
        "confirmPassword": "Confirm new password"
      },
      "errors": {
        "confirmPasswordNotMatch": "Passwords do not match"
      }
    }
  }
}

Source (https://refine.dev/docs/i18n/i18n-provider/#translation-file) Setting Up the i18n Provider To use these translations, you need to set up an i18nProvider and pass it to the <Refine /> component. Here is an example of how to set up the i18nProvider: ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@447478993101389824> kapa.ai is still learning and improving, please let us know how it did by reacting below

fair-roseOP•4mo ago

@kapa.ai how can i send a link to this message

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To send a link to a message in Refine, you can use the notificationProvider to open a notification with a link. Here is an example of how you can set up a notificationProvider using react-toastify to include a link in the message:

import { toast } from "react-toastify";

const notificationProvider = {
  open: ({ message, key, type }) => {
    if (toast.isActive(key)) {
      toast.update(key, {
        render: message,
        type,
      });
    } else {
      toast(message, {
        toastId: key,
        type,
      });
    }
  },
};

// Example usage
notificationProvider.open({
  message: (
    <div>
      Here is your message with a <a href="<https://example.com">link</a>.>
    </div>
  ),
  key: "unique-key",
  type: "info",
});

import { toast } from "react-toastify";

const notificationProvider = {
  open: ({ message, key, type }) => {
    if (toast.isActive(key)) {
      toast.update(key, {
        render: message,
        type,
      });
    } else {
      toast(message, {
        toastId: key,
        type,
      });
    }
  },
};

// Example usage
notificationProvider.open({
  message: (
    <div>
      Here is your message with a <a href="<https://example.com">link</a>.>
    </div>
  ),
  key: "unique-key",
  type: "info",
});

In this example, the message property can include HTML, allowing you to embed a link directly in the notification message. For more details on setting up a notificationProvider, you can refer to the Refine documentation on Notification Provider (https://refine.dev/docs/notification/notification-provider/#open). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@447478993101389824> kapa.ai is still learning and improving, please let us know how it did by reacting below