https://github.com/lifeart/ember-click-outside-modifier
Ember modifier to react on clicks outside an element without stopping the event propagation
https://github.com/lifeart/ember-click-outside-modifier
ember ember-addon ember-modifier
Last synced: 2 months ago
JSON representation
Ember modifier to react on clicks outside an element without stopping the event propagation
- Host: GitHub
- URL: https://github.com/lifeart/ember-click-outside-modifier
- Owner: lifeart
- License: mit
- Created: 2020-01-05T21:48:14.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-03-22T13:18:42.000Z (3 months ago)
- Last Synced: 2025-04-23T01:37:28.064Z (2 months ago)
- Topics: ember, ember-addon, ember-modifier
- Language: JavaScript
- Size: 1.02 MB
- Stars: 16
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-click-outside-modifier
Ember modifier to react on clicks outside an element without stopping the event propagation. Great for closing dialogues, menus among other things.
If you need more control on click outside - take a look at [ember-click-outside](https://github.com/zeppelin/ember-click-outside)
Inspired by [v-click-outside](https://github.com/ndelvalle/v-click-outside)
## Compatibility
* Ember.js v3.20 or above
- Embroider or ember-auto-import v2 (this is [v2 addon](https://emberjs.github.io/rfcs/0507-embroider-v2-package-format.html))
## Installation
```
ember install ember-click-outside-modifier
```
## Usage
```hbs
```
You can also provide specific events that you want to bind to with the `event` or `events` named arguments.
```hbs
```
## Usage with Glint
`ember-click-outside-modifier` is a glint enabled addon. Add this to your
`types/global.d.ts` file:
```ts
import '@glint/environment-ember-loose';
import type EmberClickOutsideRegistry from 'ember-click-outside-modifier/template-registry';
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry extends EmberClickOutsideRegistry, /* other addon registries */ {
// local entries
}
}
```
For the entire guide, please refer to [Using
Addons](https://typed-ember.gitbook.io/glint/environments/ember/using-addons#using-glint-enabled-addons)
section on the glint handbook.
Types are made available through package.json `exports` field.
## Usage with `` tag
For usage in `gts` or `gjs` files, modifier are exported from the index:
```hbs
import { clickOutside } from 'ember-click-outside-modifier';
Lorem ipsum.
```
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).