react-test/docs/translations/api-docs-joy/snackbar/snackbar.json

{
  "componentDescription": "",
  "propDescriptions": {
    "anchorOrigin": {
      "description": "The anchor of the <code>Snackbar</code>. On smaller screens, the component grows to occupy all the available width, the horizontal alignment is ignored."
    },
    "animationDuration": {
      "description": "The duration of the animation in milliseconds. This value is used to control the length of time it takes for an animation to complete one cycle. It is also utilized for delaying the unmount of the component. Provide this value if you have your own animation so that we can precisely time the component&#39;s unmount to match your custom animation."
    },
    "autoHideDuration": {
      "description": "The number of milliseconds to wait before automatically calling the <code>onClose</code> function. <code>onClose</code> should then set the state of the <code>open</code> prop to hide the Snackbar. This behavior is disabled by default with the <code>null</code> value."
    },
    "color": {
      "description": "The color of the component. It supports those theme colors that make sense for this component."
    },
    "component": {
      "description": "The component used for the root node. Either a string to use a HTML element or a component."
    },
    "disableWindowBlurListener": {
      "description": "If <code>true</code>, the <code>autoHideDuration</code> timer will expire even if the window is not focused."
    },
    "endDecorator": { "description": "Element placed after the children." },
    "invertedColors": {
      "description": "If <code>true</code>, the children with an implicit color prop invert their colors to match the component&#39;s variant and color."
    },
    "key": {
      "description": "When displaying multiple consecutive snackbars using a single parent-rendered <code>&lt;Snackbar/&gt;</code>, add the <code>key</code> prop to ensure independent treatment of each message. For instance, use <code>&lt;Snackbar key={message} /&gt;</code>. Otherwise, messages might update in place, and features like <code>autoHideDuration</code> could be affected."
    },
    "onClose": {
      "description": "Callback fired when the component requests to be closed. Typically <code>onClose</code> is used to set state in the parent component, which is used to control the <code>Snackbar</code> <code>open</code> prop. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>, for example ignoring <code>clickaway</code>.",
      "typeDescriptions": {
        "event": { "name": "event", "description": "The event source of the callback." },
        "reason": {
          "name": "reason",
          "description": "Can be: <code>&quot;timeout&quot;</code> (<code>autoHideDuration</code> expired), <code>&quot;clickaway&quot;</code>, or <code>&quot;escapeKeyDown&quot;</code>."
        }
      }
    },
    "onUnmount": { "description": "A callback fired when the component is about to be unmounted." },
    "open": { "description": "If <code>true</code>, the component is shown." },
    "resumeHideDuration": {
      "description": "The number of milliseconds to wait before dismissing after user interaction. If <code>autoHideDuration</code> prop isn&#39;t specified, it does nothing. If <code>autoHideDuration</code> prop is specified but <code>resumeHideDuration</code> isn&#39;t, we default to <code>autoHideDuration / 2</code> ms."
    },
    "size": { "description": "The size of the component." },
    "slotProps": { "description": "The props used for each slot inside." },
    "slots": { "description": "The components used for each slot inside." },
    "startDecorator": { "description": "Element placed before the children." },
    "sx": {
      "description": "The system prop that allows defining system overrides as well as additional CSS styles."
    },
    "variant": {
      "description": "The <a href=\"https://mui.com/joy-ui/main-features/global-variants/\">global variant</a> to use."
    }
  },
  "classDescriptions": {
    "anchorOriginBottomCenter": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>anchorOrigin={{ 'bottom', 'center' }}</code>"
    },
    "anchorOriginBottomLeft": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>anchorOrigin={{ 'bottom', 'left' }}</code>"
    },
    "anchorOriginBottomRight": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>anchorOrigin={{ 'bottom', 'right' }}</code>"
    },
    "anchorOriginTopCenter": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>anchorOrigin={{ 'top', 'center' }}</code>"
    },
    "anchorOriginTopLeft": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>anchorOrigin={{ 'top', 'left' }}</code>"
    },
    "anchorOriginTopRight": {
      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>anchorOrigin={{ 'top', 'right' }}</code>"
    },
    "colorDanger": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"danger\"</code>"
    },
    "colorNeutral": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"neutral\"</code>"
    },
    "colorPrimary": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"primary\"</code>"
    },
    "colorSuccess": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"success\"</code>"
    },
    "colorWarning": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>color=\"warning\"</code>"
    },
    "sizeLg": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"lg\"</code>"
    },
    "sizeMd": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"md\"</code>"
    },
    "sizeSm": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>size=\"sm\"</code>"
    },
    "variantOutlined": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"outlined\"</code>"
    },
    "variantPlain": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"plain\"</code>"
    },
    "variantSoft": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"soft\"</code>"
    },
    "variantSolid": {
      "description": "Class name applied to {{nodeName}} if {{conditions}}.",
      "nodeName": "the root element",
      "conditions": "<code>variant=\"solid\"</code>"
    }
  },
  "slotDescriptions": {
    "clickAway": "The component that renders the click away.",
    "endDecorator": "The component that renders the end decorator.",
    "root": "The component that renders the root.",
    "startDecorator": "The component that renders the start decorator."
  }
}