react-notyf v1.0.0

react-notyf

React hook for notyf package.

Installation

npm i react-notyf

Usage

You need to wrap the app intro notyf context first.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import NotyfContext from 'react-notyf'

ReactDOM.render(
  <NotyfContext>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </NotyfContext>,
  document.getElementById('root')
);

After wrapping, you need to import the useNotyf hook function in the child components and you will be ready to go.

import { useNotyf } from 'react-notyf'

function App() {
  const notyf = useNotyf();

  return (
    <button onClick={() => notyf.success("Notified")}></button>
  );
}

export default App;

Configuration

You can override the default configs by defining a config prop to the notyf context component.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import NotyfContext from 'react-notyf'

const notyfConfig = {
  duration: 5000
}

ReactDOM.render(
  <NotyfContext config={notyfConfig}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </NotyfContext>,
  document.getElementById('root')
);

Check the API to see the default values and configurations.