14

I am developing an app in React js, I'm having an issue to check whether a particular file exists in the directory or not. Actually I have a header component i.e Header.js and its a common header. But for some clients I have to change the header according to their requirements. I've to do this by making a folder with client's id and then store new header component for that client in that directory. Now I've to check on run time if a header for a specific client exists then show that client's specific header else the common header. I also have to make some other client specific components i.e footer, aside or section etc. for some specific specific clients according to their requirements. But I'm unable to check in react whether a specific component/file exists or not??

Majid NWL
  • 317
  • 2
  • 3
  • 11
  • Why are you putting if the file exists or not? You should put a check on the type of the user and based on the user type render the type of component you want to render. – Adeel Imran Jan 15 '18 at 08:55
  • Don't over complicate scenarios. Try to keep it as simple as you can. Over complicating code doesn't make you a good developer. Making it simple does. – Adeel Imran Jan 15 '18 at 08:55
  • Bro @AdeelImran I've not to make components specific to user types but I've to make these specific components user specific. I mean that specific component header/footer or aside would only be user specific i.e different for that user. Secondly It's requirement of app architecture. – Majid NWL Jan 15 '18 at 09:15
  • Can you share the user specific model on the basic of which you are loading dynamic modules. – Adeel Imran Jan 15 '18 at 10:36
  • As I've already told in the question, I have a common header component and a folder named any user_id, and in that folder I would have header component for that user, Now while showing header I have to check if that folder have header component then show that header component else show common header. – Majid NWL Jan 15 '18 at 11:04
  • @MajidNWL.have you got any better approach other than accepted answer – scott Apr 11 '21 at 06:19
  • @scott no, I completed the project at that time and didn't find any other solution afterwards... – Majid NWL Apr 13 '21 at 14:10

1 Answers1

25

You can try to require your file and then depending on the result display the correct component. 

const tryRequire = (path) => {
  try {
   return require(`${path}`);
  } catch (err) {
   return null;
  }
};

Then to use it :

render() {
 const Header = tryRequire('yourPath') ? tryRequire('yourPath').default 
   : DefaultHeader;

 return (
   <Header />
 );
}

There is another way using React.lazy but to do so you will need to create a component that is located at to root of your project (if you are using Create React App it will be placed at ./src/DynamicImport.js).

Here's the logic:

import React, { Suspense, useState, useEffect, lazy } from 'react';

const importCompo = (f, defaultComponentPath) =>
  lazy(() =>
    import(`./${f}`).catch((err) => {

    // Simulate behaviour in Strapi
    // Lazy only support default export so there's a trick to do here 
       when using a library that does not have a default export
    // The example here uses the strapi-helper-plugin package
    if (defaultComponentPath === 'strapi-helper-plugin') {
      return import('strapi-helper-plugin').then((module) => {
        const { Button } = module;

        return {
          // Here's the trick
          // I am creating a new component here
          default: () => <Button primary>Something</Button>,
        };
      });
   }

  return import(`${defaultComponentPath}`);
 }),
);

const DynamicImport = ({ filePath, defaultComponentPath, ...rest }) => {
  const [module, setModule] = useState(null);

  useEffect(() => {
    const loadCompo = () => {
      const Compo = importCompo(filePath, defaultComponentPath);

      setModule(<Compo {...rest} />);
    };

    loadCompo();
  }, []);

  return <Suspense fallback="loading">{module}</Suspense>;
};

DynamicImport.defaultProps = {
  // defaultComponentPath: './components/DefaultCompo',
  defaultComponentPath: 'strapi-helper-plugin',
};

export default DynamicImport;

Then to use it:

const MyCompo = props => {
  return (
    <DynamicImport
      filePath="./components/Foo"
      defaultComponentPath="./components/DefaultCompo"
    />
  );
};
soupette
  • 1,260
  • 11
  • 11