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

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>
    )
  })

  const renderDoctorSlides = data.quotes.map((item, i) => {
    const quotePreview = previewBuilder(item.quote);
    return (
      <React.Fragment key={i}>
        <Quote>
            <Blockquote>“{quotePreview}...“ <ReadMore onClick={() => setActiveDoctorIndexProxy(i)}/></Blockquote> :
          <QuoteImage>
            <Image filename={item.image} alt={item.title} classes="doctor-image"/>
          </QuoteImage>
          <QuoteAuthor>
            <p className="title">{item.title}</p>
            <p className="clinic">{item.clinic}</p>
            <p className="location">{item.location}</p>
          </QuoteAuthor>
        </Quote>
      </React.Fragment>
    )
  })



  return (
    <OurNetworkQuotesWrap>
      <h1 className="desktop">Here’s what our network has to say.</h1>
      <h1 className="mobile">Here’s what our<br/>network has to say.</h1>
      <Quotes className="container">
        {renderQuotes}
      </Quotes>
      <DoctorSlider css={SliderCSS} {...settings} className="hide-md-up">
        {renderDoctorSlides}
      </DoctorSlider>
    </OurNetworkQuotesWrap>
  )