1.0.2 • Published 3 years ago
st-query v1.0.2
DOM manipluation API that feels like jQuery
This is a tiny library to augment the SpringType v3 JSX/TSX microframework with a jQuery-like API for programmatic runtime DOM manipulation.
- ✅ Supports JSX/TSX for runtime DOM mutations
- ✅ Ultra-fast: Uses SpringType
refinstead of DOM CSS selector queries - ✅ Supports the most important jQuery methods
- ✅ Tiny:
431 bytes(best, brotli) -605 bytes(worst, umd, gz) - ✅ Zero dependencies
- ✅ First class TypeScript support
- ✅ Unit Test coverage almost 100%
- ✅ TestCafé smoke tests
This is how using st-query looks like:
import { tsx, render, Ref } from "springtype";
import { $ } from "st-query";
interface SomeCustomInputProps {
name: string;
}
const SomeCustomInput = ({ name }: SomeCustomInputProps) => {
const inputRef: Ref = {};
const onBlur = () => {
$(inputRef.current).val(Math.random());
console.log('Value after blur:', $(inputRef.current).val());
}
return <input ref={inputRef} name={name} onBlur={onBlur} />
}
render(<SomeCustomInput name="firstname" />);| Method | Examples |
|---|---|
attr | Get an attribute of a checkbox: $(formInputRef).attr('tabIndex') |
attr | Set an attribute of an input element: $(formInputRef).attr('tabIndex', '2') |
val | Get a value of a checkbox: $(formInputRef).val() |
val | Set the value of an input element: $(formInputRef).val(2) |
html | Get the innerHTML of an element: $(formInputRef).html() |
html | Render VDOM and replace the DOM children of an element: $(formInputRef).html(<div>Something else</div>) |
replaceWith | Render DOM and replace the DOM element itself with it: $(formInputRef).replaceWith(<div>Something else</div>) |
empty | Remove all children of an element: $(formInputRef).empty() |
remove | Remove the element itself from it's DOM parent node: $(formInputRef).remove() |
| Method | Examples |
|---|---|
on | Add a DOM event listener programmatically: $(formInputRef).on('click', (evt: MouseEvent) => { console.log('clicked on', evt.target) }) |
off | Remove a DOM event listener programmatically: $(window).on('resize', (evt: ResizeEvent) => { console.log('browser resized!', window.innerWidth) }) |
| Method | Examples |
|---|---|
addClass | Add one CSS class: $(formInputRef).addClass('outlined') |
addClass | Add many CSS classes: $(formInputRef).addClass(['button', 'mobile']) |
removeClass | Remove one CSS class: $(formInputRef).removeClass('outlined') |
removeClass | Remove many CSS classes: $(formInputRef).removeClass(['button', 'mobile']) |
toggleClass | Toggles a CSS class: $(formInputRef).toggleClass('button') |
hasClass | Returns true if the CSS class can be found on the element: $(formInputRef).hasClass('button') |
Thank you so much for supporting us financially! 🙏🏻😎🥳👍
st-query is brought to you by:
Please help out to make this project even better and see your name added to the list of our CONTRIBUTORS.md :tada: