React nugget package examples

 

React Nugget Package Examples

In the React ecosystem, there is no official "React Nugget" package. However, you might be referring to React-Nugget, a lightweight package used for React notifications. If you're looking for React Notification libraries or React Nugget as a concept for small, reusable pieces of functionality, this tutorial will give you examples on how to use React Nugget-style notifications in your app.

If you’re looking for React libraries for notifications or small components (like nuggets of UI functionality), the most likely libraries could be:

• react-toastify
• react-notifications-component
• react-alert

Let me show you examples using React Toastify, which is a popular notification library for React.

---

1. React Toastify Example

React Toastify is a great library for adding toast notifications to your React app. Here's how you can install and use it.

Step 1: Install React Toastify

First, install the react-toastify package.

bash
npm install react-toastify

Step 2: Basic Usage Example

Here’s a basic example of how to use React Toastify for toast notifications:

App.js:

javascript
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const notify = () => toast("Wow! This is a notification!");

  return (
    <div className="App">
      <h1>React Toastify Example</h1>
      <button onClick={notify}>Show Toast</button>

      {/* Toast Container */}
      <ToastContainer />
    </div>
  );
}

export default App;

• toast(): This function displays the toast notification when invoked. In the above example, it's triggered when the button is clicked.
• ToastContainer: This component should be placed in the app's root component (usually App.js) to contain all toast messages.

Step 3: Customize the Toast

You can customize the toast notification using different properties such as position, auto-close time, etc.

Custom Toast Example:

javascript
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const customNotify = () => toast.success("Custom Notification!", {
    position: toast.POSITION.TOP_CENTER,
    autoClose: 5000, // 5 seconds
    theme: "colored"
  });

  return (
    <div className="App">
      <h1>React Toastify - Custom Toast</h1>
      <button onClick={customNotify}>Show Custom Toast</button>
      
      {/* Toast Container */}
      <ToastContainer />
    </div>
  );
}

export default App;

• toast.success(): This displays a success message with a green background.
• position: Controls where the toast appears on the screen (e.g., toast.POSITION.TOP_CENTER).
• autoClose: Time (in milliseconds) before the toast disappears. You can also set it to false for never auto-close.
• theme: Set it to "colored" for a more colorful theme.

---

2. Using React-Notifications-Component

Another popular library for notifications is react-notifications-component. Here's an example of how to use it:

Step 1: Install React Notifications Component

bash
npm install react-notifications-component
npm install react-notifications-component --save

Step 2: Set Up Notifications

App.js:

javascript
import React, { useState } from 'react';
import ReactNotifications from 'react-notifications-component';
import 'react-notifications-component/dist/theme.css';
import { store } from 'react-notifications-component';

function App() {
  const [message, setMessage] = useState("");

  const handleNotify = () => {
    store.addNotification({
      title: "Notification Title",
      message: message || "This is a default notification",
      type: "success", // success, danger, warning, info
      container: "top-right",
      dismiss: {
        duration: 3000,
        onScreen: true
      }
    });
  };

  return (
    <div className="App">
      <h1>React Notifications Component Example</h1>
      <input 
        type="text" 
        placeholder="Enter custom message" 
        value={message}
        onChange={e => setMessage(e.target.value)}
      />
      <button onClick={handleNotify}>Show Notification</button>

      {/* React Notification Container */}
      <ReactNotifications />
    </div>
  );
}

export default App;

• store.addNotification(): Used to add the notification. Here, we specify the title, message, type (success, danger, etc.), and a container position (top-right).
• dismiss: Defines when the notification should auto-dismiss and if it should stay on screen.

---

3. React Alert Example

If you are looking for a simple alert notification system, React Alert can also help. Here's an example:

Step 1: Install React Alert

bash
npm install react-alert
npm install react-alert-template-basic

Step 2: Set Up React Alert

javascript
import React from 'react';
import { useAlert } from 'react-alert';

function App() {
  const alert = useAlert();

  const showAlert = () => {
    alert.show('This is a simple alert!');
  };

  return (
    <div className="App">
      <h1>React Alert Example</h1>
      <button onClick={showAlert}>Show Alert</button>
    </div>
  );
}

export default App;

In the above example:

• useAlert(): Provides a method to trigger alerts in your app.
• alert.show(): Displays the alert with a given message.

To configure the template, you need to wrap your application in a Provider in index.js.

index.js:

javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-alert';
import App from './App';
import AlertTemplate from 'react-alert-template-basic';

const options = {
  timeout: 5000,
  position: 'top center',
};

ReactDOM.render(
  <Provider template={AlertTemplate} {...options}>
    <App />
  </Provider>,
  document.getElementById('root')
);

---

Conclusion

In this tutorial, we've covered three popular libraries for implementing nugget-like notifications in React:

1. React Toastify: Used for simple and customizable toast notifications.
2. React Notifications Component: Provides a flexible notification system with customizable themes and positions.
3. React Alert: A lightweight alert system for simpler, blocking notifications.

These libraries can be considered as small "nuggets" of functionality that you can integrate into your React application to enhance the user experience. Each has its unique features, so you can choose the one that fits your needs based on customization, ease of use, and flexibility.