@instructure/quiz-interactions/src/components/categorization/common/DropTargetContainer.js

A React UI component Library for quiz interaction types.

import React, {useEffect, useRef} from 'react'
import PropTypes from 'prop-types'
import {useDrop} from 'react-dnd'
import {processNewMathInElem} from '@instructure/quiz-rce/components/RichContentRenderer/mathRenderer'

export function DropTargetContainer({children, className, onDrop}) {
  const containerRef = useRef(null)

  const [, drop] = useDrop(
    () => ({
      accept: 'dnd',
      drop: item => {
        onDrop(item)
      },
    }),
    [onDrop],
  )

  drop(containerRef)

  useEffect(() => {
    processNewMathInElem(containerRef.current)
  })

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

DropTargetContainer.propTypes = {
  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
  className: PropTypes.string,
  onDrop: PropTypes.func.isRequired,
}

DropTargetContainer.defaultProps = {
  className: undefined,
}

export default DropTargetContainer