Breaking News: Grepper is joining You.com. Read the official announcement!

react optional render smooth

Defiant Deer answered on February 24, 2023 Popularity 1/10 Helpfulness 1/10

answer react optional render smooth

react optional render smooth

Comment

const AccordionItem = (props) => {
  const { className, headline, open, children } = props

  const [height, setHeight] = React.useState(0)
  const [isOver, setOver] = React.useState(false)
  const bodyRef = React.useRef(null)

  const getDivHeight = React.useCallback(() => {
    const { height } = bodyRef.current ? bodyRef.current.getBoundingClientRect() : {}

    return height || 0
  }, [])

  // set `auto` to allow an inner content to change
  const handleTransitionEnd = React.useCallback(
    (e) => {
      if (e.propertyName === 'height') {
        setHeight(open ? 'auto' : 0)
        if (!open) {
          setOver(true)
        }
      }
    },
    [open]
  )

  React.useEffect(() => {
    setHeight(getDivHeight())
    setOver(false)
    
    if (!open) {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => setHeight(0))
      })
    }

  }, [getDivHeight, open])
  
  const shouldHide = !open && isOver

  return (
    <div style={{overflow: 'hidden'}}>
      <div
        style={{ height, transition: "all 2s" }}
        onTransitionEnd={handleTransitionEnd}
      >
        <div ref={bodyRef}>
          {shouldHide ? null : children}
        </div>
      </div>
    </div>
  )
}



const App = () => {
  const [open, setOpen] = React.useState(false)

  return (
    <div>          
      <button onClick={() => setOpen(isOpen => !isOpen)}>toggle</button>
      
      <table style={{width: '100%'}}>
        <tr>
          <td>
            Hot Pongal
            <AccordionItem open={open}>
              <button>-</button>
              <input  />
              <button>+</button>
             </AccordionItem> 
          </td>
          <td>
            Hot Pongal
            <AccordionItem open={open}>
              <button>-</button>
              <input  />
              <button>+</button>
             </AccordionItem> 
          </td>
        </tr>
         <tr>
          <td>
            Hot Pongal
            <AccordionItem open={open}>
              <button>-</button>
              <input  />
              <button>+</button>
             </AccordionItem> 
          </td>
          <td>
            Hot Pongal
            <AccordionItem open={open}>
              <button>-</button>
              <input  />
              <button>+</button>
             </AccordionItem> 
          </td>
        </tr>
         <tr>
          <td>
            Hot Pongal
            <AccordionItem open={open}>
              <button>-</button>
              <input  />
              <button>+</button>
             </AccordionItem> 
          </td>
          <td>
            Hot Pongal
            <AccordionItem open={open}>
              <button>-</button>
              <input  />
              <button>+</button>
             </AccordionItem> 
          </td>
        </tr>
      </table>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript render

Link to this answer
Share Copy Link

Contributed on Feb 24 2023

Defiant Deer

0 Answers Avg Quality 2/10

react optional render smooth

Contents

More Related Answers

react optional render smooth

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.