![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@three11/dom-helpers
Advanced tools
Helper functions for faster DOM scripting
yarn add @three11/dom-helpers
or
npm i @three11/dom-helpers
import {
$,
$$,
hasClass,
addClass,
removeClass,
toggleClass,
insertAfter,
insertBefore,
dispatchEvent,
enableListeners,
getScrollPosition,
isElementVisibleInViewport
} from '@three11/dom-helpers';
or
Import each function separately.
See functions list below:
$
- queries the DOM and obtains a single element
const button = $('#button');
$$
- queries the DOM and obtains a collection of elements
const buttons = $$('#button');
enableListeners
- enables the custom on
method for attaching of event listeners
enableListeners();
button.on('click', () => {
console.log('clicked a single button');
});
buttons.on('click', () => {
console.log('clicked a button in a collection');
});
isElementVisibleInViewport
- accepts two arguments: DOM element and a boolean flag which states if the element should be partially visible. Returns boolean.
const element = document.getElementById('element');
const isVisible = isElementVisibleInViewport(element, true);
getScrollPosition
- returns the scroll position of the passed DOM Elementconst element = document.getElementById('element');
const scrollPosition = getScrollPosition(element);
hasClass
- Returns boolean true if the element has the specified class, false otherwise.addClass
- Adds the specified class to an elementremoveClass
- Removes the specified class from an elementtoggleClass
- Toggles the specified class on an elementconst element = document.getElementById('element');
hasClass(element, 'test'); // false
addClass(element, 'test');
removeClass(element, 'test');
/**
* The last argument forces the classname.
* If true the classname will be added,
* if false it will be removed.
* If omitted, the classname will be toggled
*/
toggleClass(element, 'test', true);
insertAfter
- Insert the supplied HTML String after the elementinsertBefore
- Insert the supplied HTML String before the elementconst element = document.getElementById('element');
insertAfter(element, '<div>Test</div>');
insertBefore(element, '<div>Test</div>');
dispatchEvent
- Fires a custom (or built-in) eventconst element = document.getElementById('element');
// The third argument is event data. Can be omitted
dispatchEvent(element, 'click', { data: true });
GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
FAQs
Helper functions for faster DOM scripting
The npm package @three11/dom-helpers receives a total of 7 weekly downloads. As such, @three11/dom-helpers popularity was classified as not popular.
We found that @three11/dom-helpers demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.