Im currently creating a UI library for my react native project.
The components are separated into its own files like: Button, TextBox, Panel etc etc
So when i want to use them I do:
import Button from '../UI/button';
import TextBox from '../UI/textBox';
But how could I impletement the following call instead? Not needing to do import statetments for each specific component.
import { Button,TextBox, SomeOtherComp } from '../UI/??';
This would save a lot of typing when I want to use multiple components...
Create a file called index.js
The purpose of this file is to simple expose all available components from your library
import Button from './button';
import TextBox from './textBox';
...
module.exports = {
Button,
TextBox,
...
};
In the code that consumes your UI library, you can now import the components like this:
import { Button, TextBox, SomeOtherComp } from '../UI';
When you import a folder name, the packages will look for an index.js file and import that.
It is possible to re-export modules directly without writing duplicate code for importing and exporting:
// UI.js
export { default as Button } from './button';
export { default as TextBox } from './textBox';
Usage:
import { Button, TextBox } from './UI';
Related
I am creating new library for react, say custom-ant-lib which imports antd and contains overrides for components like button, modal etc...
In my app I want to use components like Row & Col which are components of antd library.
I have already imported antd in custom-ant-lib.
I have imported custom-ant-lib in my app.
So importing antd again in my app for Row & Col will cause redundancy and additional import.
Current status: I import both antd and custom-ant-lib in my JSX file to use various components.
Expected: I should be able to skip antd import and use components of antd from custom-ant-lib, also I do not want to override or change any thing for Row and Col but should be able to export them.
ant docs link :- https://ant.design/docs/react/introduce
e.g current JSX:
import {Row, Col} from 'ant'
import {Button} from 'custom-ant-lib'
expected JSX:
import {Row, Col, Button} from 'custom-ant-lib'
Is there any way to skip import antd use them indirectly through custom-ant-lib?
In 'custom-ant-lib' module, Do something like:
import {Row, Col} from 'ant'
...rest of code
export {Row, Col, Button}
In your custom library, you can use something like
export * from "ant"
Then all components from ant should be accessible in your application through your custom ant lib.
I have many components in a components folder. How can I import
them in one line?
For example I have this:
import FormField from "./../components/FormField";
import MultiSelect from "./../components/MultiSelect";
but I want to import it like this:
import {MultiSelect, FormField} from "./../components";
which is not working.
To do like this:
import { MultiSelect, FormField } from "./../components";
In your components folder, create new file: index.js with
export { default as FormField } from './FormField';
export { default as MultiSelect} from './MultiSelect';
Just make index.js in components folder
export * from './FormField';
export * from './MultiSelect';
After this you can easily access.
import {MultiSelect,FormField} from "./../components";
Add index.js in components folder having:
export { default as FormField } from './FormField';
export { default as MultiSelect } from './MultiSelect';
Then in the file where you want to use these components, import them using:
import { MultiSelect,FormField } from "./../components";
There is already an answer for your question. But let me add my 5 cents:
First:
you may import like this: from "../components"; instead of from "./../components";
Second:
I have some experience with imports and I have found out that import {MultiSelect, FormField} from "./../components"; has a lot of pitfalls. You need to create index.js fiels. When you will search MultiSelect uses within your IDE you will always have index.js and that isn't useful. Also if you'll decide to move your file you will have to change 3 files instead of 1 (old index.js new index.js and file that used your MultiSelect).
Is it worth it? It's up too you of course! But now you know what problems you may have :)
For my solution I want users to get all components from my library.
Example: import Checkbox from 'MyLibrary';
But for native, I'm don't want to make all the components my self. At least, not now. And that is why I want them to reference my library, so when I do change/write the component, it will automaticly update at their end.
For example, a checkbox. There is a default react-native checkbox (https://facebook.github.io/react-native/docs/checkbox)
I would like to export this default component within my component.
I tried things like:
export { Checkbox as default } from 'react-native';
and
import { Checkbox } from 'react-native';
export default Checkbox;
and
import React from 'react';
import { Checkbox as ReactCheckbox } from 'react-native';
const Checkbox = (...props) => <ReactCheckbox {...props} />;
export default Checkbox;
But that didn't work. Any suggestions?
Edit: I made a mistake with the import, it's CheckBox not Checkbox...
It's CheckBox, not Checkbox, doh!
I'm not quite sure but, while I tried your code it didn't worked on mine too. But, you can do like this:
import { TextInput as myTextInput } from 'react-native';
But, while I checked this on expo app:
import { CheckBox as myCheckBox } from 'react-native';
From this what I think is react native doesn't support CheckBox on Expo app. But, if you libraries like React Native Elements or Native Base. Then you can import checkbox like this.
import { CheckBox as myCheckBox } from 'react-native-elements';
Maybe this Snack will help you.
Happy coding :)
If I understand you correctly, you want to RE-EXPORT the React/Community checkbox as your component and replace it with your own component in future?
Native Checkbox component is only available in Android, so you have to use community built one from UI-Kitten/Native Base/React Native Element.
First explore and pick your UI Library and install it. Then you can import the checkbox component from the respective library and export it until you write your own component.
This will work
import { CheckBox } from 'react-native-elements';
export default CheckBox;
In case you want to wrap the component with default properties or styling then you can do something like below
import { CheckBox } from 'react-native-elements';
export default function(props) {
const yourProps = {
checkedIcon: <Image source={require('../checked.png')} />,
uncheckedIcon: <Image source={require('../unchecked.png')} />
};
return (
<CheckBox {...yourProps} {...props} />
);
}
I want to do this
in src/modules/layout/nav.js
...
export default NavBar;
in src/modules/layout/side.js
...
export default sideBar;
in src/modules/layout/index.js
import NavBar from './nav';
import sideBar from './side';
export { NavBar, sideBar };
in src/modules/index.js
import * from './layout';
The last bit does not work. According to the tutorial I would then be able to go to src/App.js and use the navBar as so:
import {navBar} from './modules';
But the fact that * does not work I can't do that. Is there any alternative without having to go like this
in src/modules/index.js
import * as All from './layout';
export All;
Then in App.js, go All.navBar. That feels ugly
Well, I have gone through what you have; I feel what you actually needed is to understand the reason for doing that. I am pretty sure what you want to achieve is to have your components imported from a single file rather than from the files where the components were exported.
You don't want to do this:
import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';
But what you want is to import all your components from a single file wherever you would want to use them.
So, if that is the case, you don't need to add more complexities. All you just need to do is:
// export the components like this
export default NavBar;
export default SideBar;
// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it
import NavBar from './NavBar';
import SideBar from './SideBar';
export {
NavBar,
SideBar
}
// Hence, wherever you need both components, you can easily do this:
import { NavBar, SideBar } from '../index.js'
// From the above, you are just importing both components from the index.js file.
So, I believe that answers your question.
Just to add to Onyekachi Samuel's answer and to answer the all part of the title:
After creating the src/modules/layout/index.js file as he described, you can import all by:
import * as All from './layout'
And use the exported components:
<All.NavBar/> <All.SideBar/>
For instance:
// Folder structure:
// |-App.js
// |-Layout
// |-NavBar.js
// |-SideBar.js
// |-index.js
// App.js in the same location as Layout folder
import React from 'react';
import * as All from './layout'
export default function App(props) {
return (<div>
<All.NavBar/>
<All.SideBar/>
</div>)
}
Hope this might clarify it for some.
I just started working on a project and I decided to use ant design package. I want to create reusable and modifiable components. For instance, I want to create a button component and use it in entire app instead of using antd's button component directly. Therefore, if I decided to change how the button looks I will just change button component I created. So if I decided to use another ui package I just need to change button component or style of it instead of changing it in entire app. I am actually a back-end developer and do not have much knowledge on front-end. I wanna know if my approach is proper or not. I am asking because bellow code does not seem proper to me:
import React from 'react';
import { Button } from 'antd';
function myButton(props) {
return (
<Button {...props}>
{props.children}
</Button>
);
}
export default myButton;
In other files:
import { Button } from './components/button';
Instead of:
import { Button } from 'antd';
Should I use this approach in that way or extend these components without a change (or export them directly from components directory)?