CODEWITHSUNDEEP
reactjsredux
user2312798
user2312798

Reputation: 41

Importing common components in React

I have some common Rract components like Alert, Prompt, Panel, etc. in my React js project. I'm using a modular folder struture for my app and want to reuse these common components throughout my modules.

Is there any way of importing these modules either using node_modules or es6 way of importing?

What I want to achieve is this:

import {Alert, Panel} from 'my-libs';

I don't want relative .. paths as I might be nesting my modules/submodules.

All I need is a cleaner, path insensitive imports, either using es6/webpack (ProvidePlugin = ?).

Any help is greatly appreciated.

Upvotes: 2

Views: 1059

Answers (2)

Drew Schuster
Drew Schuster

Reputation: 2691

One thing to keep in mind with Andreyco's comment is that this will not work if you are server side rendering without bundling the server code up as well. As far as I know there's no equivalent aliasing functionality with node by itself.

Upvotes: 0

Andreyco
Andreyco

Reputation: 22872

I set aliases when I am in such situation.

resolve: {
  root: path.resolve(__dirname),
  alias: {
    '@components': 'src/components',
    '@controls': 'src/controls',
    '@css': 'src/css',
    '@img': 'src/img',
    '@lang': 'src/lang',
    '@layouts': 'src/layouts',
  },
},

I use to prefix my aliases so that it's clear I am requesting my very own component, not npm package.

Having set aliases, I can omit ./, ../, ../../ or whatever else is needed to specify component location

NOTE I use Webpack for bundling, but I am sure it's possible with Browserify as well.

Upvotes: 3

Related Questions