Я сделал простой пакет npm snackbar-notification-js, который представляет собой функцию, которая показывает закусочную (в приложении для реагирования). index.js моего пакета выглядит следующим образом
function SnackBar(text, duration) {
var div = document.getElementById('snackbar-js')
if (!div) {
div = document.createElement("div")
div.id = 'snackbar-js'
div.innerHTML = text;
div.style.height = "30px"
div.style.width = "fit-content"
div.style.margin = "10px"
div.style.padding = "10px"
div.style.position = "fixed"
div.style.bottom = "20px"
div.style.left = "20px"
div.style.backgroundColor = "rgb(63, 63, 63)"
div.style.borderRadius = "5px"
div.style.color = "white"
div.style.display = "flex"
div.style.justifyContent = "center"
div.style.alignItems = "center"
div.style.flexDirection = 'column'
div.style.boxShadow = "black 1px 1px 1px"
div.style.minWidth = "100px"
div.style.fontFamily = "'Noto Sans', sans-serif"
document.body.innerHTML += `<style> @keyframes show{ 0%{bottom: -100px;visibility: hidden;} 100%{bottom: 20px;visibility: visible;} } @keyframes hide{ 0%{bottom: 20px;visibility: visible;} 100%{bottom: -100px;visibility: hidden;} } @keyframes snackbar-loader{ 0%{width:100%;} 100%{width:0%;} } #snackbar-js::after{ content: ''; width: 100%; height: 4px;position:absolute;bottom:0px;left:1px;border-radius:5px;background-color: red; animation: snackbar-loader ${duration/1000}s forwards linear; } </style>`
div.style.animation = "show 0.5s ease-out forwards"
setTimeout(() => {
div.style.animation = "hide 0.5s ease-out forwards"
setTimeout(()=>{div.remove()},500)
}, duration);
document.body.appendChild(div)
}
else {
div.innerText = text;
}
}
module.exports = SnackBar;
Теперь я использую этот модуль, чтобы показать закусочную (уведомление) в моем приложении для реагирования, но он выдает ошибку, что SnackBar не является функцией. Мой App.js выглядит следующим образом App.js
import './App.css';
const SnackBar = require('snackbar-notification-js')
function App() {
function func(){
SnackBar("shlok",2000)
}
return (
<button onClick = {()=>func()}>click me</button>
);
}
export default App;
ошибка:
Однако он отлично работает, когда я использую его напрямую (без реагирующего приложения)
пример
Любая помощь приветствуется. Спасибо!
Поскольку ваш код работает для меня, я предполагаю, что ваш пакет не установлен должным образом.
Попробуйте npm uninstall snackbar-notification-js
, а затем переустановите его с помощью npm install snackbar-notification-js
.
Хорошо, не могли бы вы показать мне вывод console.info(SnackBar)
его вывод "не определен"
Я отредактировал свой ответ, надеюсь, что это поможет
Спасибо за ответ. Но я пробовал это до того, как это не сработало