@veracity/vui 1.1.3 → 1.2.0-beta.1

package/src/utils/dom.ts

@@ -6,22 +6,29 @@ export const addElement = (id: string): HTMLElement => {
 
 export const removeElement = (id: string): void => {
   const element = document.getElementById(id)
-  if (element) element.remove()
+  element?.remove?.()
+}
+
+export const addBodyClass = (className: string): void => document.body.classList.add(className)
+
+export const removeBodyClass = (className: string): void => document.body.classList.remove(className)
+
+export const removeElements = (className: string): void => {
+  const elements = document.getElementsByClassName(className)
+  for (let i = 0, len = elements.length; i < len; i++) elements[i]?.remove?.()
 }
 
 export const addElementClass = (id: string, className: string): void => {
   const element = document.getElementById(id)
-  if (element) element.classList.add(className)
+  element?.classList?.add?.(className)
 }
 
 export const removeElementClass = (id: string, className: string): void => {
   const element = document.getElementById(id)
-  if (element) element.classList.remove(className)
+  element?.classList?.remove?.(className)
 }
 
-export const appendToBody = (rootElem: HTMLElement) => {
-  document.body.appendChild(rootElem)
-}
+export const appendToBody = (rootElem: HTMLElement) => document.body.appendChild(rootElem)
 
 export const addContainer = (id: string): void => {
   const toastContainer = document.getElementById(id)

package/src/utils/react.ts

@@ -3,6 +3,7 @@
 import React, {
   DependencyList,
   Dispatch,
+  ReactElement,
   RefObject,
   SetStateAction,
   useCallback,
@@ -10,6 +11,7 @@ import React, {
   useRef,
   useState
 } from 'react'
+import ReactDOM from 'react-dom'
 
 import { isArray, isFunction } from './assertion'
 import { runIfFn } from './function'
@@ -170,3 +172,14 @@ export function useIsMounted() {
 
   return useCallback(() => isMounted.current, [])
 }
+
+/** A resolver to render a DOM node depending on React major version. */
+export function reactDomRender(id: string, content: ReactElement) {
+  const wrapper = document.getElementById(id)
+  if (!wrapper) return
+  try {
+    ReactDOM.render(content, wrapper)
+  } catch (error) {
+    console.log(error)
+  }
+}