#Is there a way to conditionally import fetcher?

1 messages · Page 1 of 1 (latest)

runic seal
#

I have a circumstance where I have a react component that will sometimes be rendered inside of my remix app, and sometimes be used to build a static page.

Screen_Shot_2022-08-28_at_8.39.03_AM.png
#

In this circumstance it's a menu. When on the remix app I would like to make these items clickable so a user can edit them, and have it interact with fetcher.

#

But outside of here I want to render the same component to a wordpress site for example, and don't want to send out a component that has useFetcher in it at all

haughty veldt
#

Some ideas

  1. Dynamically import the useFetcher module: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import#importing_defaults

  2. Create 2 versions of the same component & then dynamically import the component based on your condition

const ComponentA = lazy(() => import('path/to/componentA'));

if(some_condition_is_true) {
  <ComponentA />
}
import - JavaScript | MDN

The import() call, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.

runic seal
#

I'm going to try that dynamic import, I've actually never needed to use it before and I've read about it