nutrafol popup helper

Usage no npm install needed!

<script type="module">
  import nutrafolPopupHelper from 'https://cdn.skypack.dev/@nutrafol/popup-helper';


Nutrafol popup helper


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


  • 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


  • 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(() => {
  }, [])

  const setActiveDoctorIndexProxy = (i) => {
    if(i !== null) {
        wrapper: "DrModal",
        desktopEl: "DrModalDesktop",
        mobileEl: "DrModalMobile",
        closeEl: popupHelper.isMobile() ? "CloseWrapper" : "CloseWrapperMobile"
    } else {
  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> : ''
            <p className="title">{item.title}</p>
            <p className="clinic">{item.clinic}</p>
            <p className="location">{item.location}</p>
        {activeDoctorIndex === i &&
          <ModalOverlay onClick={() => setActiveDoctorIndexProxy(null)}/>
          <DrModal id={`DrModal`}>
            <ModalBody id={`DrModalDesktop`} className="show-md-up flex">
              <QuoteBox width={[1, null, 2 / 3]}>
                  <CloseWrapper id={`CloseWrapper`} onClick={() => setActiveDoctorIndexProxy(null)}>
            <ModalBody id={`DrModalMobile`} className="hide-md-up mobile">
                <CloseWrapper id={`CloseWrapperMobile`} onClick={() => setActiveDoctorIndexProxy(null)}>
                <ModalQuote className="mobile">
                <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>

  return (
      <Quotes className="container">