Closed orhanmusellim closed 3 years ago
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.
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.
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,
build
folder instead of the main.Thanks, Furkan.
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!
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.
Thanks for this libraries.
I need to set global style changes, eg. change Success Notify background color.
Thanks.