Noteworthy Programming Masterpiece

    @nutrafol/popup-helper

    0.1.10 • Public • Published

    Nutrafol popup helper

    Development

    • make changes
    • change version +1 in package.json (example 2.3.4)
    {
      "name": "@nutrafol/popup-helper",
      "version": "1.2.3"
    ...
    

    Usage

    • modify package.json in your project to match the latest published version
    ...
    "@nutrafol/nutrafol-ui-kit": "1.2.3",
    "@nutrafol/popup-helper": "2.3.4",
     ...
    
    • run install npm i

    Functionality

    • makes tabbing trapped within a modal DOM
    • makes Close button focused on open

    - blocks arrow key events (we allow use arrow key in forms)

    • prevents background scroll/zoom on mobiles
    • closes modal on Escape
    • restores focus on a clicked active link on close

    Config object

    wrapper (string, required) popup wrapper DOM id

    closeEl (string) close button DOM id

    desktopEl (string) desktopEl DOM id - if you have separate desktop content

    mobileEl (string) mobileEl DOM id - if you have separate mobile content

    fullScreenMobile (bool, default false) wipe body under mobile popup, prevents zoom out of modal_

    preventTouch (bool, default false) allow touch 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>
                    <GatsbyImage 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>
      )
    }

    Install

    npm i @nutrafol/popup-helper

    DownloadsWeekly Downloads

    29

    Version

    0.1.10

    License

    ISC

    Unpacked Size

    11.4 kB

    Total Files

    3

    Last publish

    Collaborators

    • tim-hannes
    • lev-savranskiy
    • preston-nutrafol
    • zfv201