bravosix
v2.4.5
Published
Modul untuk mengganti warna teks dan latar belakang
Downloads
26
Maintainers
Readme
BravoSix
BravoSix adalah pustaka JavaScript untuk mengganti tema warna elemen HTML dengan animasi efek "going dark" seperti night vision.
Instalasi
Anda dapat menginstal BravoSix melalui NPM:
npm install bravosix
Cara Penggunaan
Berikut adalah contoh penggunaan BravoSix dalam aplikasi React:
- Import BravoSix
import BravoSix from "bravosix";
- Buat instance BravoSix
const bravosix = new BravoSix();
- Gunakan metode
applyColors(colorTheme)
Metode ini mengganti tema warna elemen tanpa animasi.
bravosix.applyColors(colorTheme);
colorTheme
dapat berupa:
- "original"
- "dark"
- "light"
- "night-vision" terinspirasi dari night vision di game Call of Duty: Modern Warfare II (2022)
Contoh menggunakan applyColors
dalam aplikasi React:
const handleButtonClick = () => {
let newTheme;
switch (colorTheme) {
case "original":
newTheme = "dark";
break;
case "dark":
newTheme = "light";
break;
case "light":
newTheme = "original";
break;
default:
newTheme = "original";
}
setColorTheme(newTheme);
setIsNightVision(false);
bravosix.applyColors(newTheme);
};
- Gunakan metode
goingDark()
Metode ini memulai animasi efek "going dark" dan mengganti tema warna menjadi night vision.
bravosix.goingDark();
Contoh lengkap dengan applyColors
dan goingDark
:
import React, { useState, useEffect } from "react";
import "./App.css";
import BravoSix from "bravosix";
function App() {
const [colorTheme, setColorTheme] = useState("original");
const [isNightVision, setIsNightVision] = useState(false);
const [bravosix, setBravosix] = useState(null);
useEffect(() => {
setBravosix(new BravoSix());
}, []);
const handleButtonClick = () => {
let newTheme;
switch (colorTheme) {
case "original":
newTheme = "dark";
break;
case "dark":
newTheme = "light";
break;
case "light":
newTheme = "original";
break;
default:
newTheme = "original";
}
setColorTheme(newTheme);
setIsNightVision(false);
bravosix.applyColors(newTheme);
};
const handleGoingDarkClick = () => {
if (isNightVision) {
setColorTheme("original");
setIsNightVision(false);
bravosix.applyColors("original");
} else {
setIsNightVision(true);
bravosix.goingDark();
}
};
return (
<div className="App">
<header className="App-header">
<h1>Klik tombol di bawah untuk mengganti tema warna:</h1>
<button onClick={handleButtonClick}>Ganti Tema Warna</button>
<button onClick={handleGoingDarkClick}>
{isNightVision ? "Kembali ke Original" : "Going Dark"}
</button>
</header>
</div>
);
}
export default App;
certification: MIT