Skip to content
/ oops Public

A tiny hooks library that can use es6 template string to make jsx

License

Notifications You must be signed in to change notification settings

imtaotao/oops

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

oops(hooks library)

npm version

oops has built-in jsx parsing function, but you can also compile jsx with babel.

oops demo

Hooks

Basic Hooks

  • useState
  • useEffect
  • useContext

Additional Hooks

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useLayoutEffect
  • useImperativeHandle
  • useTransition
  • useDeferredValue

API

  • h
  • jsx
  • memo
  • render
  • createContext
  • createRef
  • forwardRef
  • isValidElement
  • createPortal
  • lazy
  • Children
    • map
    • forEach
    • count
    • toArray
    • only

Built-in components

  • <Fragment/>
  • <Suspense/>
  • <Context.Provider/>
  • <Context.Consumer/>

Caveats

  1. The observedBits function of context is not implemented yet.

  2. The functional components also supports defaultProps.

  3. 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.

demo

  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)

About

A tiny hooks library that can use es6 template string to make jsx

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published