@nutrafol/popup-helper

Nutrafol popup helper

Nutrafol package which

• makes tabbing trapped within a modal
• makes Close button focused on open
• restores focus on an active link on close
• fixes background scroll issue on mobiles
• more items coming up...

Config object

wrapper (string, required) wrapper DOM id

closeEl (string) close button DOM id

desktopEl (string) desktopEl DOM id if you have separated desktop content

mobileEl (string) mobileEl DOM id if you have separated mobile content

preventTouch (bool, default false) IOS: allow scroll only, disallow pinch zoom

Usage Example

import popupHelper from "@nutrafol/popup-helper"

const OurNetworkQuotes = (data) => {

  const [activeDoctorIndex, setActiveDoctorIndex] = useState(null)

  useEffect(() => {
    popupHelper.trackActiveElement()
  }, [])

  const setActiveDoctorIndexProxy = (i) => {
    if(i !== null) {
      popupHelper.onOpen({
        wrapper: "DrModal",
        desktopEl: "DrModalDesktop",
        mobileEl: "DrModalMobile",
        closeEl: popupHelper.isMobile() ? "CloseWrapper" : "CloseWrapperMobile"
      })
    } else {
      popupHelper.onClose()
    }
    setActiveDoctorIndex(i);
  }
  const renderQuotes = data.quotes.map((item, i) => {
    const quotePreview = previewBuilder(item.quote);
    return (
      <React.Fragment key={i}>
        <Quote className="show-md-up">
          {quotePreview ?
            <Blockquote>“{quotePreview}...“ <ReadMore onClick={() => setActiveDoctorIndexProxy(i)}/></Blockquote> :
          }
          <QuoteAuthor>
            <p className="title">{item.title}</p>
            <p className="clinic">{item.clinic}</p>
            <p className="location">{item.location}</p>
          </QuoteAuthor>
        </Quote>
        {activeDoctorIndex === i &&
        <>
          <ModalOverlay onClick={() => setActiveDoctorIndexProxy(null)}/>
          <DrModal id={`DrModal`}>
            <ModalBody id={`DrModalDesktop`} className="show-md-up flex">
              <QuoteBox width={[1, null, 2 / 3]}>
                <ModalHeader>
                  <CloseWrapper id={`CloseWrapper`} onClick={() => setActiveDoctorIndexProxy(null)}>
                    <CloseIcon/>
                  </CloseWrapper>
                </ModalHeader>
                <ModalQuote>
                  “{item.quote}“
                </ModalQuote>
              </QuoteBox>
            </ModalBody>
            <ModalBody id={`DrModalMobile`} className="hide-md-up mobile">
              <ModalHeader>
                <CloseWrapper id={`CloseWrapperMobile`} onClick={() => setActiveDoctorIndexProxy(null)}>
                  <CloseIcon/>
                </CloseWrapper>
              </ModalHeader>
              <QuoteBox>
                <ModalQuote className="mobile">
                  “{item.quote}“
                </ModalQuote>
              </QuoteBox>
              <AuthorBoxMobile>
                <Image filename={item.image} alt={item.title} classes="doctor-image"/>
                <p className="title">{item.title}</p>
                <p className="clinic">{item.clinic} <br/> {item.location}</p>
              </AuthorBoxMobile>
            </ModalBody>
          </DrModal>
        </>
        }
      </React.Fragment>
    )
  })




  return (
    <OurNetworkQuotesWrap>
      <Quotes className="container">
        {renderQuotes}
      </Quotes>
    </OurNetworkQuotesWrap>
  )