Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/compactjs/uea
Allow a range of different ways to select HTML Elements in your function
https://github.com/compactjs/uea
array element html html-elements input javascript uea
Last synced: 24 days ago
JSON representation
Allow a range of different ways to select HTML Elements in your function
- Host: GitHub
- URL: https://github.com/compactjs/uea
- Owner: CompactJS
- License: mit
- Created: 2020-04-24T21:09:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-04T14:17:50.000Z (almost 2 years ago)
- Last Synced: 2024-11-28T16:17:50.947Z (about 1 month ago)
- Topics: array, element, html, html-elements, input, javascript, uea
- Language: TypeScript
- Homepage: https://compactjs.github.io/uea/
- Size: 2.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
@compactjs/uea
Universal Element Accept
Allows a range of different ways to select HTML Elements
·
Homepage
·
View Demo
·
Report Bug / Request Feature
·
You are writing a JavaScript library and need to receive one or more HTML elements? But you want to leave your users a broad choice, on how to select them? Then this might be for you.
## Table of Contents
- [What this is](#what-this-is)
- [Installation](#Install)
- [Usage](#usage)
- [Test](#run-tests)
- [Contact](#contact)
- [Contributing](#Contributing)
- [License](#license)
## What this is
Universal Element Accept (uea) allows you to accept a range of different inputs as HTML elements.
It accepts query selector strings, arrays, NodeLists and more (check out [usage](#usage)) and always returns either an array with HTMLElements or a single element, depending on the function you use.
## Install
### NPM:
```sh
npm install @compactjs/uea
```
### CDN:
```html
```
## Usage
### As module:
```javascript
import { select, selectOne } from '@compactjs/uea';
```
### Example:
```javascript
// select multiple elements
select('.my-classes');
select(document.getElementById('my-id'));
select(document.forms);
// or only select a single element
selectOne('.my-classes');
selectOne(document.getElementById('my-id'));
```
Check out the [demo](https://compactjs.github.io/uea/)
and the [examples file](https://github.com/CompactJS/uea/blob/main/example/index.html) for more examples.
### Doc:
```typescript
/**
* Use a range of different ways to select HTML elements.
* Always returns an array of elements.
*/
export function select(
input: string | HTMLElement | HTMLElement[] | HTMLCollection | NodeList
): HTMLElement[];
/**
* Use a range of different ways to select an HTMLElement.
* Always returns a single HTMLElement.
*/
export function selectOne(selector: string | HTMLElement): HTMLElement | null;
```
## Run tests
```sh
npm run test
```
## Contact
👤 **Timo Bechtel**
- Website: https://timobechtel.com
- Twitter: [@TimoBechtel](https://twitter.com/TimoBechtel)
- GitHub: [@TimoBechtel](https://github.com/TimoBechtel)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
1. Check [issues](https://github.com/CompactJS/uea/issues)
1. Fork the Project
1. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)
1. Test your changes `npm run test`
1. Commit your Changes (`git commit -m 'feat: add amazingFeature'`)
1. Push to the Branch (`git push origin feat/AmazingFeature`)
1. Open a Pull Request
### Commit messages
This project uses semantic-release for automated release versions. So commits in this project follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.2/) guidelines. I recommend using [commitizen](https://github.com/commitizen/cz-cli) for automated commit messages.
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Distributed under the [MIT](https://github.com/CompactJS/uea/blob/main/LICENSE) License.
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_