How to set global style ?

[Orhan MUSELLİM]

Thanks for this libraries.

I need to set global style changes, eg. change Success Notify background color.

Thanks.

[Furkan]

Hi @orhanmusellim

You can use the Init() functions to do that. An example of usage is below.

Notiflix.Notify.Init({
  success: {
    background: 'green',
  },
});

Also, these links might be helpful.
https://github.com/notiflix/Notiflix#1--notify-module
https://github.com/notiflix/Notiflix#notiflix-notify-module-default-options
https://www.notiflix.com/documentation/#GenNotify

Thanks.
Furkan.

[Victor Pietro Moreno]

Hi @furcan, thanks for the help. I don't know exactly where should I put the Notiflix.Notify.Init() function so it applies globally.

I've tried to put it inside my _app.tsx_ file, right before the return, but it didn't work. Do you know where should I put it? This is a NextJS project.

[Furkan]

Hi @VictorPietro ,

Actually, the init() and merge() functions are not being designed to use within modern frameworks like React, Next.js, etc...

But also, the answer is "yes", these functions also can be used within these frameworks as well. An example of usage is below.

// Layout (or the main wrapper component like "_app.tsx" etc...)

import { Notify } from 'notiflix';

function Layout() {

  // useEffect hook
  useEffect(() => {

    Notify.init({
      backOverlay: true,
      success: {
        background: 'green',
      }
    });
  
  }, []);

  return (
    <>
      <ComponentX />
      <ComponentY />
      <ComponentZ />
    </>
  );
}

// ComponentX

import { Notify } from 'notiflix';

function ComponentX() {
  return (
    <button
      type="button"
      onClick={() => Notify.success('Hi!')}
    >
      <span>Click Me</span>
    </button>
  );
}

export default ComponentX;

---

But, there are method-based init/extend options(as a parameter) for all the methods also. So, in my opinion, the best use-case scenario is below.

1- A Constants object for your settings.

// xxx/yyy/constants.ts

import { INotifyOptions } from 'notiflix';

interface IConstants {
  notiflix: {
    notify: INotifyOptions;
    // the other modules, etc...
  };
}

const constants: IConstants = {
  notiflix: {
    notify: {
      success: {
        background: 'green',
      },
    },
    // the other modules, etc..
  },
};

export { constants };

2- Any component that you have wanted to use Notiflix.

// ComponentX

import { Notify } from 'notiflix/build/notiflix-notify-aio';

import { constants } from 'xxx/yyy/constants';

function ComponentX() {
  return (
    <button
      type="button"
      onClick={() => Notify.success('Hi!', constants.notiflix.notify)}
    >
      <span>Click Me</span>
    </button>
  );
}

export default ComponentX;

And also you can extend over and over again your method-based init options for each method as well.

// ...
onClick={() => Notify.success('Hi!', { ...constants.notiflix.notify, useIcon: false })}
// ...

---

In addition,

• I recommend that to use Notiflix v3.1.0 and above for your projects as well.
• With v3.1.0 => you can import the modules one-by-one without any dead/unnecessary code. So, please import Notiflix from the build folder instead of the main.
• You can also find a Next.js implementation example in this repository: https://github.com/notiflix/notiflix.github.io (it might be helpful)

Thanks,
Furkan.

[Victor Pietro Moreno]

Hi @VictorPietro ,
(...)
Thanks, Furkan.

Hi @furcan, thanks for the brilliant answer and your time! You may have noticed at this point that I'm inexperient with NextJS, so your detailed answer was very helpful.

Using useEffect() hook in _app didn't work for me, but the second solution, using a constant, has worked magnifically!

[Furkan]

Hi @VictorPietro

Happy to hear that.

And no worries, I am not an expert either. 😊

Using within a hook is not a good option in any way. Because it will be called in every render(all components, etc...) and it will make lots of costs. The optimum way is following the second solution.

Have a nice day,
Furkan.