Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vaul

Package Overview
Dependencies
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vaul - npm Package Compare versions

Comparing version 0.8.0 to 0.8.5

dist/index.d.mts

20

dist/index.d.ts

@@ -28,19 +28,19 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';

onClose?: () => void;
direction?: 'top' | 'bottom' | 'left' | 'right';
preventScrollRestoration?: boolean;
} & (WithFadeFromProps | WithoutFadeFromProps);
declare function Root({ open: openProp, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, nested, closeThreshold, scrollLockTimeout, dismissible, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, }: DialogProps): React.JSX.Element;
declare function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): React.JSX.Element;
declare function Root({ open: openProp, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, nested, closeThreshold, scrollLockTimeout, dismissible, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, direction, preventScrollRestoration, }: DialogProps): JSX.Element;
declare function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): JSX.Element;
declare const Drawer: {
Root: typeof Root;
NestedRoot: typeof NestedRoot;
Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
onAnimationEnd?: (open: boolean) => void;
} & React.RefAttributes<HTMLDivElement>>;
Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
Content: any;
Overlay: any;
Trigger: React.ForwardRefExoticComponent<any>;
Portal: React.FC<DialogPrimitive.DialogPortalProps>;
Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
Close: React.ForwardRefExoticComponent<any>;
Title: React.ForwardRefExoticComponent<any>;
Description: React.ForwardRefExoticComponent<any>;
};
export { Drawer };
{
"name": "vaul",
"version": "0.8.0",
"version": "0.8.5",
"description": "Drawer component for React.",
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
},
"files": [

@@ -12,4 +22,4 @@ "dist"

"scripts": {
"build": "tsup src/index.tsx",
"dev": "tsup src/index.tsx --watch",
"build": "bunchee",
"dev": "bunchee --watch",
"dev:website": "turbo run dev --filter=website...",

@@ -39,7 +49,10 @@ "dev:test": "turbo run dev --filter=test...",

"@radix-ui/react-dialog": "^1.0.4",
"@types/node": "^20.11.0",
"bunchee": "^4.4.0",
"eslint": "^7.32.0",
"prettier": "^2.5.1",
"typescript": "5.2.2",
"tsup": "^6.4.0",
"turbo": "1.6"
"react": "18.2.0",
"react-dom": "18.2.0",
"turbo": "1.6",
"typescript": "5.2.2"
},

@@ -50,3 +63,3 @@ "peerDependencies": {

},
"packageManager": "pnpm@6.32.11",
"packageManager": "pnpm@8.14.1",
"dependencies": {

@@ -53,0 +66,0 @@ "@radix-ui/react-dialog": "^1.0.4"

https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516
Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. It uses [Radix's Dialog primitive](https://www.radix-ui.com/docs/primitives/components/dialog#trigger) under the hood and is inspired by [this tweet](https://twitter.com/devongovett/status/1674470185783402496).
Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. You can read about why and how it was built [here](https://emilkowal.ski/ui/building-a-drawer-component).
## Usage
To start using the library, install it in your project:
To start using the library, install it in your project:,

@@ -49,3 +49,3 @@ ```bash

Contains all parts of a dialog. Use `shouldScaleBackground` to enable background scaling, it requires an element with `[vaul-drawer-wrapper]` data attribute to scale its background.
Can be controlled with the `value` and `onOpenChange` props. Can be opened by default via `defaultOpen` prop.
Can be controlled with the `value` and `onOpenChange` props. Can be opened by default via the `open` prop.

@@ -64,2 +64,6 @@ Additional props:

`direction`: Direction of the drawer. Can be `top` or `bottom`, `left`, `right`. Defaults to `bottom`.
`preventScrollRestoration`: When `true` it prevents scroll restoration when the drawer is closed after a navigation happens inside of it. Defaults to `true`.
### Trigger

@@ -66,0 +70,0 @@

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc