dom-helpers - tiny, extremely modular, DOM helper library for IE8+

  •        11

Mostly just naive wrappers around common DOM API inconsistencies, Cross browser work is minimal and mostly taken from jQuery. This library doesn't do a lot to normalize behavior across browsers, it mostly seeks to provide a common interface, and eliminate the need to write the same damn if (ie8) statements in every project. over and over again, or you need a ok getComputedStyle polyfill but don't want to include all of jQuery, use this.

https://github.com/react-bootstrap/dom-helpers

Tags
Implementation
License
Platform

   




Related Projects

PREACT - Fast 3kB alternative to React, with the same ES2015 API

  •    Javascript

PREACT is a fast 3kB alternative to React, with the same ES2015 API. It provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety. Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

react-tiny-dom - 🍙 A minimal implementation of react-dom using react-reconciler

  •    Javascript

react-tiny-dom is a minimal implementation of react-dom as custom renderer using React 16 official Renderer API. The purpose of this project is to show the meaning of each method of the ReconcilerConfig passed to react-reconciler, by using a practical yet familiar environment: the browser DOM.

react-flip-move - Effortless animation between DOM changes (eg

  •    Javascript

This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.

petit-dom - minimalist virtual dom library

  •    Javascript

A minimalist virtual DOM library. Not quite. React is a more complete solution for writing UIs using Components. It ships with a full Component API and implementation. Also, React is not specifically a virtual DOM library. It just happens that the Component API is implemented using virtual DOM (which may or may not change in the future).


react-log - React for the Console

  •    Javascript

react-log exports a single React Component called Log. Each child will not be rendered on the DOM, but will produce an analog representation on the console. No proprietary syntax is needed for child HTML elements. react-log handles the parsing and rendering of native React-DOM elements for you.

react-track - Track the position of DOM elements. Create cool animations.

  •    Javascript

Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a way to track DOM elements in a functional, declarative manner. It's important to note that AwesomeComponent must be stateful in this example. At the time of writing react-track does not support stateless functional components (SFCs) due to its reliance on the ref attribute, which such components do not provide. In order to track an SFC, wrap it in a TrackedDiv.

vidom - Library to build UI based on virtual DOM

  •    Javascript

Vidom is just a library to build UI. It's highly inspired from React and based on the same ideas. Its main goal is to provide as fast as possible lightweight implementation with API similar to React. Try live playground to play with Vidom in your browser.

react-useportal - 🌀 React hook for Portals

  •    TypeScript

Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component (react docs). This hook is also isomorphic, meaning it works with SSR (server side rendering).

apollo - Standalone cross-browser DOM class manipulation module

  •    Javascript

Apollo is a 1KB standalone DOM class manipulation module that provides a cross-browser wrapper for addClass, hasClass, removeClass and toggleClass methods. Apollo uses the modern and blazing fast classList methods when available, and falls back to manual class manipulation for legacy support, meaning IE6+ support through to Chrome.Ensure you're using the files from the dist directory (contains compiled production-ready code). Ensure you place the script before the closing </body> tag.

nerv - A blazing fast React alternative, compatible with IE8 and React 16.

  •    Javascript

Nerv is a virtual-dom based JavaScript (TypeScript) library with identical React 16 API, which offers much higher performance, tinier package size and better browser compatibility. 💫 Support React 16 features, Error Boundaries, Portals, custom DOM attributes, etc.

hyperx - 🏷 - tagged template string virtual dom builder

  •    Javascript

This module is similar to JSX, but provided as a standards-compliant ES6 tagged template string function. hyperx works with virtual-dom, react, hyperscript, or any DOM builder with a hyperscript-style API: h(tagName, attrs, children).

react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  •    Javascript

Check out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.

react-faux-dom - DOM like structure that renders to React

  •    Javascript

DOM like data structure to be mutated by D3 et al, then rendered to React elements. ReactFauxDOM supports a wide range of DOM operations and will fool most libraries but it isn't exhaustive (the full DOM API is ludicrously large). It supports enough to work with D3 but will require you to fork and add to the project if you encounter something that's missing.

react-mix - Base on react-native, plan to support all CSS gramma, and all js dom event, and all h5 framework, our object is write once, run anywhere!

  •    Javascript

Base on react-native, plan to support all CSS gramma, and all js dom event, and all h5 framework, our object is write once, run anywhere!

enzyme - JavaScript Testing utilities for React

  •    Javascript

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

  •    Javascript

This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.innerHTML = newHTML). While replacing an existing DOM tree with an entirely new DOM tree will actually be very fast, it comes with a cost. The cost is that all of the internal state associated with the existing DOM nodes (scroll positions, input caret positions, CSS transition states, etc.) will be lost. Instead of replacing the existing DOM tree with a new DOM tree we want to transform the existing DOM tree to match the new DOM tree while minimizing the number of changes to the existing DOM tree. This is exactly what the morphdom module does! Give it an existing DOM node tree and a target DOM node tree and it will efficiently transform the existing DOM node tree to exactly match the target DOM node tree with the minimum amount of changes. morphdom does not rely on any virtual DOM abstractions. Because morphdom is using the real DOM, the DOM that the web browser is maintaining will always be the source of truth. Even if you have code that manually manipulates the DOM things will still work as expected. In addition, morphdom can be used with any templating language that produces an HTML string.

react-markdown - Markdown component for React

  •    Javascript

react-markdown is a Markdown component for React using remark. There are other ways for markdown in React out there so why use this one? The two main reasons are that they often rely on dangerouslySetInnerHTML or have bugs with how they handle markdown. react-markdown uses a syntax tree to build the virtual dom which allows for updating only the changing DOM instead of completely overwriting. react-markdown is 100% CommonMark (optionally GFM) compliant and has extensions to support custom syntax.

react-transition-group - An easy way to perform animations when a React component enters or leaves the DOM

  •    Javascript

ATTENTION! To address many issues that have come up over the years, the API in v2 is not backwards compatible with the original React addon (v1-stable).For a drop-in replacement for react-addons-transition-group and react-addons-css-transition-group, use the v1 release, which is still actively maintained. Documentation and code for that release are available on the v1-stable branch.

component-inspector - Component DOM inspector

  •    Javascript

General purpose of tool is showing components boundaries and its DOM fragment with some details. It could be extended by features like source fragment locating and opening file in editor. See Additional features section for details. You also could setup custom API for your own component solution.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.