Would like to be able to import any component in the components directory, directly from the components directory.
The current directory structure is:
src
├── components
│ ├── Camera.tsx
│ ├── Keyboard.tsx
│ └── index.ts
└── screens
└── App.tsx
And would like to be able to import as follows:
// src/screens/App.tsx
import { Keyboard } from '../components'
The first option is obviously to maintain a long list of exports in src/components/index.ts:
// src/components/index.ts
export { Camera } from './Camera'
export { Keyboard } from './Keyboard'
However, this is cumbersome to maintain. Is there a way using glob and the export object to automagically export all components, or possibly another way all together?
In this case, you need to create an index.ts file in your components directory.
First, import all of your components in it:
import Camera from './Camera'
import Keyboard from './Keyboard'
// and so on for other components
Now, export all of them:
import Camera from './Camera'
import Keyboard from './Keyboard'
export Camera;
export Keyboard;
This can be simplified in this way:
export Camera from './Camera'
export Keyboard from './Keyboard'
Finally, use the './components' path to import the Camera and other components as well:
import { Keyboard, Camera } from '../components'
Note 1: Using this type of imports/exports will cause problems with code splitting or using Suspense/Lazy methods.
Note 2: debugging will be harder with a general index file.
You could achieve that by editing your index.ts to be like this
src
├── components
│ ├── Camera.tsx
│ ├── Keyboard.tsx
│ └── index.ts <=== this file
└── screens
└── App.tsx
export * from './Camera'
export * from './Keyboard'