Export all files in `index.ts`

user_8847329 0
Viewed 6115

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?

node-modules react-native typescript reactjs javascript
3 Answers

Since you are using TypeScript, why not just use the paths in TsConfig like described here?

user_87758800

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.

user_57379500

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'
user_119605980
Related