		{
		"name": "@chakra-ui/popper",
		"version": "3.0.5",
		"version": "3.0.6",
		"description": "A React component and hooks wrapper for popper.js",
		@@ -39,3 +39,3 @@ "keywords": [
		"dependencies": {
		"@chakra-ui/react-utils": "2.0.4",
		"@chakra-ui/react-utils": "2.0.5",
		"@popperjs/core": "^2.9.3"
		@@ -47,3 +47,3 @@ },
		"devDependencies": {
		"@chakra-ui/hooks": "2.0.7",
		"@chakra-ui/hooks": "2.0.8",
		"framer-motion": "^6.2.9",
		@@ -58,3 +58,4 @@ "react": "^18.0.0"
		"build:fast": "tsup src/index.ts"
		}
		},
		"readme": "# Popper\n\nA React hooks wrapper for popper.js to dynamic positioning of containers around\na reference.\n\n> This is an internal hook of Chakra-UI, and it's not covered by semver, and may\n> cause unexpected or broken application behavior. Use them at your own risk.\n\n## Installation\n\n```sh\nyarn add @chakra-ui/popper\n```\n\n## Basic usage\n\nBy default, the `usePopper` hook returns props for the popper, reference and\narrow.\n\n```jsx\nimport { Box } from \"@chakra-ui/layout\"\nimport { Button } from \"@chakra-ui/button\"\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\n\nfunction Example() {\n const { isOpen, onToggle } = useDisclosure()\n const { popperRef, referenceRef, getArrowProps } = usePopper()\n return (\n <>\n <Button ref={referenceRef} onClick={onToggle} mb={2}>\n {isOpen ? \"Click me to see less\" : \"Click me to see more\"}\n </Button>\n {isOpen && (\n <Box ref={popperRef} bg=\"red\">\n <div\n {...getArrowProps({\n style: {\n background: \"red\",\n },\n })}\n />\n This is a popover for the button!\n </Box>\n )}\n </>\n )\n}\n```\n\n## Parameters\n\n### Changing the placement\n\nYou can change the placement of the popper by passing the `placement` option to\n`usePopper` and set it to the `popper.js` placement.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n placement: \"right-start\",\n})\n```\n\n### Match reference's width\n\nIn some cases, you might want to allow the popper take the width of the\nreference. For example, autocomplete, select, etc.\n\nTo achieve this, pass the `matchWidth` option and set it to `true`\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n matchWidth: true,\n})\n```\n\n### Place the popper next to the reference\n\nYou can place the popper next to the reference without margin or distance\nbetween them. Useful to create an autocomplete or typeahead feature.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n gutter: 0,\n})\n```\n\n### Using inside a fixed container\n\nIf the reference element is inside a fixed container, you should use the `fixed`\nstrategy.\n\n```jsx\nconst { popperRef, referenceRef } = usePopper({\n strategy: \"fixed\",\n})\n```\n\n## Adding transition\n\nWhen add transitions to a popper component, it is usually advised to apply\npopper and transition to different elements.\n\n```tsx\n// 1. Import components\nimport { useDisclosure } from \"@chakra-ui/hooks\"\nimport { usePopper } from \"@chakra-ui/popper\"\nimport { motion, AnimatePresence, Variants } from \"framer-motion\"\n\nexport function Example() {\n // 2. Create toggle state\n const { isOpen, onToggle } = useDisclosure()\n\n // 3. Create motion variants\n const slide: Variants = {\n exit: {\n y: -2,\n opacity: 0,\n },\n enter: {\n y: 0,\n opacity: 1,\n },\n }\n\n // 4. Consume the `usePopper` hook\n const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =\n usePopper({\n placement: \"bottom-start\",\n })\n\n return (\n <>\n <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>\n <div {...getPopperProps()}>\n <AnimatePresence>\n {isOpen && (\n <motion.div\n transition={{\n type: \"spring\",\n duration: 0.2,\n }}\n variants={slide}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n style={{\n background: \"red\",\n width: 200,\n transformOrigin,\n borderRadius: 4,\n }}\n >\n Testing\n <div\n {...getArrowProps({\n style: {\n background: \"red\",\n },\n })}\n />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n </>\n )\n}\n```\n\n> When not rendering the popper conditionally, we recommend using\n> `visibility: hidden` instead of `hidden` or `display: none`\n"
		}

@chakra-ui/popper - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Dependency changes