compactjs / uea

Allow a range of different ways to select HTML Elements in your function

@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
• Installation
• Usage
• Test
• Contact
• Contributing
• 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) and always returns either an array with HTMLElements or a single element, depending on the function you use.

Install

NPM:

npm install @compactjs/uea

CDN:

<script src="https://unpkg.com/@compactjs/uea/dist/index.umd.js"></script>

Usage

As module:

import { select, selectOne } from '@compactjs/uea';

Example:

// 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 and the examples file for more examples.

Doc:

/**
 * 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

npm run test

Contact

👤 Timo Bechtel

• Website: https://timobechtel.com
• Twitter: @TimoBechtel
• GitHub: @TimoBechtel

🤝 Contributing

Contributions, issues and feature requests are welcome!

1. Check issues
2. Fork the Project
3. Create your Feature Branch (git checkout -b feat/AmazingFeature)
4. Test your changes npm run test
5. Commit your Changes (git commit -m 'feat: add amazingFeature')
6. Push to the Branch (git push origin feat/AmazingFeature)
7. Open a Pull Request

Commit messages

This project uses semantic-release for automated release versions. So commits in this project follow the Conventional Commits guidelines. I recommend using commitizen for automated commit messages.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Distributed under the MIT License.

---

This README was generated with ❤️ by readme-md-generator