A tiny hooks library that can use es6 template string to make jsx
MIT License
oops has built-in jsx parsing function, but you can also compile jsx with babel.
useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useLayoutEffect
useImperativeHandle
useTransition
useDeferredValue
h
jsx
memo
render
createContext
createRef
forwardRef
isValidElement
createPortal
lazy
Children
map
forEach
count
toArray
only
<Fragment/>
<Suspense/>
<Context.Provider/>
<Context.Consumer/>
The observedBits
function of context
is not implemented yet.
The functional components
also supports defaultProps
.
Beacase the React
event system is customized, so, the dom created by the createPortal
methods allow event bubbling to parent node in vitualDOM
tree. But oops
uses native event system. our event bubbling behaviors exist in real dom tree that result we can't achieve the same behavior with the React
, But our bubbling behavior can still be performed according to the structure of the vitualDOM
tree.
import { render, useState, useEffect, createPortal } from '@rustle/oops'
const el = document.createElement('div')
const appRoot = document.getElementById('app-root')
const modalRoot = document.getElementById('modal-root')
// Listening to the bubbling behavior of the native event system
el.onclick = e => {
console.log(e.target)
}
function Modal(props) {
useEffect(() => {
modalRoot.appendChild(el)
return () => modalRoot.removeChild(el)
})
return createPortal(props.children, el)
}
const modalStyles = {
position: 'fixed',
top: 0,
left: 0,
height: '100%',
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.5)',
}
function Child() {
// The click event on this button will bubble up to parent,
// because there is no 'onClick' attribute defined
return (
<div style={ modalStyles }>
<button>Click</button>
</div>
)
}
function Parent(props) {
const [clicks, handleClick] = useState(0)
return (
<div onClick={e => {
console.log(e.target, e.currentTarget, e.nativeEvent)
handleClick(clicks + 1)
}}>
<p>Number of clicks: { clicks }</p>
<p>
Open up the browser DevTools
to observe that the button
is not a child of the div
with the onClick handler.
</p>
<Modal>
<Child />
</Modal>
</div>
)
}
render(<Parent />, appRoot)