toast.js | toast plugin | Plugin library

I am trying to use dynamic toast from bootstrap-vue. Here what I am trying to do:

I made a workaround for named Lazy imports in React I want someone to check if this is actually working as lazy import or not.

Toast.js

I have a module system, which can be controlled via an admin UI, developers can enable or disable features and the task runner then takes care of preparing all UI assets into single files to load on the front-end.

With SASS, I can programmatically control the index.scss file to be compiled, meaning that this is simple enough - however, with JS I don't find the same option, yet.

The idea is to avoid any file duplication, manipulation or movement, to reduce complexity, avoid issues and also to speed up the task runner, which quickly gets bloated and slowed down.

As the process begins with a save routine, I can collect data about the current "active" modules and store this is any file format - json, csv, whatever - I would then like to load that config from the file in the Gruntfile - which might be continually watching ( in case it's a problem that config can only be loaded once? -- the data would need to be grabbed again fresh before each compilation ).

simple example:

*module.json

So I am attempting to use a custom hook that utilizes useContext which I would expect to cause a rerender of my ToastContainer component when ToastContext changes. However, the ToastContainer component is not rerendering when the context changes. When using dev tools I can see that the context is indeed changed by the hook, but the new data is not being displayed.

Sorry for all the code, I'm just not sure where the bug lies

useToast.js

web Failed to compile. C:/XXX/node_modules/galio-framework/src/Toast.js 11:19 Module parse failed: Unexpected token (11:19) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | class Toast extends Component {

static propTypes = { | children: PropTypes.node.isRequired, | isShow: PropTypes.bool.isRequired,

i am trying to create a toast notification. I have 3 differents button and i want to change the color of the toast depending on which button i click. Note: the text you enter in the box is the text appearing in the toast.

Right now its all stacking up with the same color.

Heres the code ( the CSS is not good, i was just trying out things).

NOTE: i CAN'T use any library, pure javascript/html/css NO jquery

Can anyone help? Thanks a lot !

HTML

I'm having this issue in an Angular 7 app. I was not able to reproduce it with pure Bootstrap CSS/JS and Popper.js.

I'm trying to use vanilla Bootstrap JS and jQuery because I need Bootstrap's toasts and the other libs (ng-bootstrap and ngx-bootstrap) don't support toasts for the moment.

https://github.com/Crocmagnon/angular-bootstrap4-dropdown-issue

Run it with npm run start

I tried to ask the developer but he's clueless : https://github.com/FezVrasta/popper.js/issues/748

To reproduce with the example :

I have taken an example from the Word.js documentation Here, but I cant get similar code to work in my project. I am trying to call a method in one js file from another. My method is written as the following.

I want to using ToastifyJS as JS Library for toast in my Rails app. Since Rails 6 using Webpack as default so I did google for a while and end up no where.

Here is what I did:

Install Rails 6: