To make developing React apps easier, we can add some libraries to make our lives easier.
In this article, we’ll look at some popular libraries for React apps.
react-tabs
The react-tabs package lets us add tabs to our React app.
To install it, we run:
npm i react-tabs
Then we can use it by writing:
import React from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
export default function App() {
return (
<div>
<Tabs>
<TabList>
<Tab>tab 1</Tab>
<Tab>tab 2</Tab>
</TabList>
<TabPanel>
<h2>some content</h2>
</TabPanel>
<TabPanel>
<h2>more content</h2>
</TabPanel>
</Tabs>
</div>
);
}
We import the CSS and components that comes with the package.
Then we use the Tabs component with the TabList for adding the tab links.
TabList has the tabs links inside.
Tab is the button we can click on to switch tabs.
TabPanel has the content for each tab.
Now we get tabs with content without doing much work.
rc-upload
rc-tree is a package that provides us with a file input component.
To use it, we install it by running:
npm i rc-upload
Then we can use it by writing:
import React from "react";
import Upload from "rc-upload";
const uploaderProps = {
action: "/upload",
data: { foo: 1, bar: 2 },
headers: {
Authorization: "token"
},
multiple: true,
beforeUpload(file) {
console.log("beforeUpload", file.name);
},
onStart: file => {
console.log("onStart", file.name);
},
onSuccess(file) {
console.log("onSuccess", file);
},
onProgress(step, file) {
console.log("onProgress", Math.round(step.percent), file.name);
},
onError(err) {
console.log("onError", err);
}
};
export default function App() {
return (
<div>
<div
style={{
margin: 100
}}
>
<div>
<Upload {...uploaderProps}>upload file</Upload>
</div>
<div
style={{
height: 200,
overflow: "auto",
border: "1px solid red"
}}
>
<div
style={{
height: 500
}}
>
<Upload
{...this.uploaderProps}
id="test"
component="div"
style={{ display: "inline-block" }}
>
another uploader
</Upload>
</div>
<label>Label for Upload</label>
</div>
</div>
</div>
);
}
We have the Uploader component which has the file upload input.
uploaderProps has an object with the upload URL, headers, data and more.
data has the request data.
action has the URL.
And we also pass in various event handlers that run in various situations.
It takes handlers for before upload, when upload starts, success, error, and progress.
rc-input-number
rc-input-number provides us with numeric input.
To install it, we run:
npm i rc-input-number
Then we use the InputNumber component that comes with the library:
import React from "react";
import InputNumber from "rc-input-number";
export default function App() {
return (
<div>
<InputNumber defaultValue={100} />
</div>
);
}
The defaultValue has the value for the input.
We can make it a controlled input with the value and onChange props:
import React from "react";
import InputNumber from "rc-input-number";
export default function App() {
const [value, setValue] = React.useState(100);
const onChange = value => {
setValue(value);
};
return (
<div>
<InputNumber value={value} onChange={onChange} />
</div>
);
}
We have a function to set the value state and get the value and pass it to the value prop as with any other inputs.
Also, we can make it read-only or disable it.
The formatting of the number can also change.
rc-notification
rc-notification provides us with a UI component for adding notifications in a React app.
To install it, we run:
npm i rc-notification
Then we can use it by writing:
import React, { useEffect } from "react";
import Notification from "rc-notification";
export default function App() {
useEffect(() => {
Notification.newInstance({}, notification => {
notification.notice({
content: "content"
});
});
}, []);
return <div />;
}
We import the Notification object and call the newInstance method to display a notification within the callback.
The notice method shows the notification content.
content has the notification content.
By default, it displays for 1.5 seconds.
We can change the duration of that it’s displayed, the styles, and more.
We can also remove the notification programmatically.
Conclusion
react-tabs lets us add tabs.
rc-upload is a file uploader component.
rc-input-number is a numerical input for React apps.
rc-notification is a simple notification component.
