Skip to content

Latest commit

 

History

History
115 lines (88 loc) · 4.04 KB

README.md

File metadata and controls

115 lines (88 loc) · 4.04 KB
Raw

SpringType: st-query

DOM manipluation API that feels like jQuery

Gitter

Purpose

This is a tiny library to augment the SpringType v3 JSX/TSX microframework with a jQuery-like API for programmatic runtime DOM manipulation.

Features

  • ✅ Supports JSX/TSX for runtime DOM mutations
  • ✅ Ultra-fast: Uses SpringType ref instead 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

API docs

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" />);

DOM manipulation

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 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()

DOM events

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) })

CSS

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')

Backers

Thank you so much for supporting us financially! 🙏🏻😎🥳👍


Tom

Maintainers

st-query is brought to you by:


Aron Homberg

Contributing

Please help out to make this project even better and see your name added to the list of our CONTRIBUTORS.md 🎉