lwz7512/bestjs

BestJS.solutions

@2022/05/28

Tiny solutions for Javascript development from real projects.

Hero image credit to fabio.

Contributions(PR, Issue) to this repo are welcome!

Origin

agilejs@2022/05/12

Solutions

each solution is expected to include:

Tile
Description or Challenge
Code snippte

#1. How to render html in Reactjs safely

Challenge: html string may invalid or unclosed to parse directly unless severside sanitized.

Snippet:

import renderHTML from 'react-render-html'

export default function parseValidHtmlString(string) {
  // check string for valid markup and render elements OR
  // strip tags and render string.
  if (
    !/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i.test(
      string,
    )
  ) {
    return string.replace(/<[^>]*>?/gm, '')
  } else {
    return renderHTML(string)
  }
}

Usage:

<div>{parseValidHtmlString(htmlString)}</div>

Created @2022/05/12

#2. What is the best calendar component in ReactJS?

available calendar components are:

...

#3. What is the best map library in javascript?

Available map library are:

Comparision:

...

#4. What is the best form creation & validity library in ReactJS?

Challenge: create form in reactjs could be cubersome if you choosing manage form state mannually.

Solution:

Formik

Build forms in React, without the tears

along with a good partner for validation schema definition with Yup.

#5. What is the best javascript tutorials site up to date and modern?

JAVASCRIPT.INFO

#6. What is the best ReactJS tutorials for free?

30 Days of React

#7. What is the best open source Firebase alternative?

#8. What is the best open source Headless CMS

#13. What is the best svg image embedding solution in ReactJS ?

in package.json:

"devDependencies": {
    "babel-plugin-inline-react-svg": "^1.1.2"
}

in YourComponent.js file:

import { ReactComponent as CalendarIcon } from '../../assets/icons/calendar.svg'

#14. What is the best way to detect view in viewport in ReactJS ?

Use Case:

Video playing is expected to pause while it is invisible on the screen.

Solution:

react-in-viewport

Usage:

import handleViewport from 'react-in-viewport'

const AnywhereVideoBlock = ({inViewport, ...}) => ()

const AnywhereVideo = handleViewport(AnywhereVideoBlock)

export default AnywhereVideo

#15. What is the best slider or carousel component in ReactJS ?

React Slick

#16. What is the best modal solution in ReactJS ?

react-modal

#17. What is the best click away handler wrapper in ReactJS ?

Solution one:

import React, { useEffect, useRef } from 'react'

const ClickAwayHandler = ({ handleClickAway, classNames, children }) => {
  const ref = useRef(null)

  useEffect(() => {
    function handleOutSideClick(e) {
      if (!ref.current || !ref.current.contains(e.target)) {
        handleClickAway()
      }
    }

    function handleEscKey(e) {
      if (e.keyCode === 27) {
        handleClickAway()
      }
    }

    window.addEventListener('click', handleOutSideClick)
    window.addEventListener('keydown', handleEscKey)

    return () => {
      window.removeEventListener('click', handleOutSideClick)
      window.removeEventListener('keydown', handleEscKey)
    }
  })

  return (
    <div className={classNames} ref={ref}>
      {children}
    </div>
  )
}

export default ClickAwayHandler

#18. What is the best hover away handler wrapper in ReactJS ?

Solution one:

import React, { useEffect, useRef } from 'react'

const HoverAwayHandler = ({ handleHoverAway, classNames, children }) => {
  const ref = useRef(null)

  useEffect(() => {
    function handleOutSideClick(e) {
      if (!ref.current || !ref.current.contains(e.target)) {
        handleHoverAway()
      }
    }

    function handleEscKey(e) {
      if (e.keyCode === 27) {
        handleHoverAway()
      }
    }

    window.addEventListener('mouseout', handleOutSideClick)
    window.addEventListener('keydown', handleEscKey)

    return () => {
      window.removeEventListener('mouseout', handleOutSideClick)
      window.removeEventListener('keydown', handleEscKey)
    }
  })

  return (
    <div className={classNames} ref={ref}>
      {children}
    </div>
  )
}

export default HoverAwayHandler

#19. What is the best way to safely and dynamically import component in Next.js ?

const layoutName = 'YourComponentFileName'

const errorInfo = () => <p>{layoutName}.js not found</p>
// safe way to load a component at runtime
// https://github.com/vercel/next.js/issues/7480
const LayoutComponent = dynamic(
  () => import(`src/components/flex-layouts/${layoutName}.js`).catch(() => errorInfo)
)

return (<LayoutComponent />)

#20. What is the best input format library ?

Cleave.js

#21. What is the best open source components using Tailwind CSS?

#22. What is the best ReactJS boilerplate project ?

Bulletproof React

#23. What is the best Electron boilerplate project using ReactJS as frontend?

Electron React Boilerplate

#24. What is the best web version code editor which is up to date and modern?

Monaco Editor

#25. What is the best rich text editor on web based on ReactJS ?

lexical

#26. What is the best ... ?

...

#27. What is the best ... ?

...

#28. What is the best ... ?

...

#29. What is the best ... ?

...

#30. What is the best ... ?

...

31. What is the best ... ?

...

#32. What is the best ... ?

...

lwz7512 / bestjs