import { useEffect, useState } from 'react';
import $ from "jquery"

/**
@example
const ref = useRef<HTMLDivElement>(null)

usejQuery(ref, $ => {
  $.fadeOut(3000).fadeIn(3000)
})

const text = usejQuery(ref, $ => {
  return $.text()
})

useEffect(()=> {
  console.log(text)
},[text])
*/
export const usejQuery = <T extends HTMLElement, S extends any>(ref: React.RefObject<T>, callback: ($el: JQuery<T>) => S): S => {
  const [state, setState] = useState<S>()
  useEffect(()=> {
    if(ref && ref.current){
      setState(callback($(ref.current)))
    }
  },[ref])
  return state
}