@2022/05/28
Tiny solutions for Javascript development from real projects.
Hero image credit to fabio.
Contributions(PR, Issue) to this repo are welcome!
each solution is expected to include:
- Tile
- Description or Challenge
- Code snippte
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
available calendar components are:
...
Available map library are:
Comparision:
...
Challenge: create form in reactjs could be cubersome if you choosing manage form state mannually.
Solution:
Build forms in React, without the tears
along with a good partner for validation schema definition with Yup.
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'
Use Case:
Video playing is expected to pause while it is invisible on the screen.
Solution:
Usage:
import handleViewport from 'react-in-viewport'
const AnywhereVideoBlock = ({inViewport, ...}) => ()
const AnywhereVideo = handleViewport(AnywhereVideoBlock)
export default AnywhereVideo
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
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
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 />)
...
...
...
...
...
...
...