Wondering what’s next for npm?Check out our public roadmap! »

    st-query

    1.0.2 • Public • Published

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

    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 🎉

    Install

    npm i st-query

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    48.9 kB

    Total Files

    57

    Last publish

    Collaborators

    • avatar