{"slug":"faq","title":"Frequently Asked Questions","description":"Common questions and answers about the project","contentType":"overview","content":"## Why the need for `normalizeProps`?\n\nThe goal of `normalizeProps` is to convert the props of the component into the\nformat that is compatible with the respective framework.\n\nIt is also used to ensure that the returned properties are strongly typed.\n\nThere are subtle differences between how element attributes are named across\nframeworks like React, Solid and Vue. Here are some examples:\n\n**Keydown listener**\n\n- React and Solid: The keydown listener property is `onKeyDown`.\n- Vue: The keydown listener property is `onKeydown`.\n\n**Styles**\n\n- React: Pass a numeric value for margin attributes like `{ marginBottom: 4 }`.\n- Solid: It has to be `{ \"margin-bottom\": \"4px\" }`.\n- Vue: You need to ensure the value is a string with unit.\n  `{ marginBottom: \"4px\" }`.\n\nThese little nuances between frameworks are handled automatically when you use\n`normalizeProps`.\n\n## How can I attach custom extra event handlers to the elements?\n\nSee the approach [here](/guides/composition#event-composition).\n\n## How can I get Zag working in a custom window environment?\n\nSee the approach [here](/guides/composition#custom-window-environment).\n\n## What would it take to support other frameworks?\n\nWe're currently interested in supporting as many frameworks as possible. The key\nrequirements are:\n\n- **Support for \"spread props\"**: The framework should have support for\n  spreading attributes and event handlers.\n\n- **Exposed Typings**: The framework should expose the typings for the\n  attributes and event handlers. This is optional but would provide the best DX.\n\n## How do I upgrade all zag dependencies?\n\nSince we use independent versioning for each zag package, it can sometimes be\ninconvenient to upgrade all dependencies individually.\n\nYou can use scoped upgrades feature in your package manager to update all zag\npackages seamlessly.\n\n```bash\npnpm up \"@zag-js/*\"\n# or\nyarn upgrade --scope @zag-js\n# or\nnpm up @zag-js/...\n```","editUrl":"https://github.com/chakra-ui/zag/edit/main/website/data/overview/faq.mdx"}