react-bulma-theme
v1.0.4
Published
react-bulma-theme is a component that wraps your app and provide bulma themes easily
Downloads
4
Maintainers
Readme
React bulma theme
react-bulma-theme is a component that wraps your app and provide bulma themes easily
Getting Started
Installation
yarn add react-bulma-theme
or
npm i react-bulma-theme
DEMO
Usage
simple case :
App.tsx or .js
import React from "react";
import ReactBulmaTheme from "react-bulma-theme";
const App = () => (
<ReactBulmaTheme theme="minty">
<MyApp>
</ReactBulmaTheme>
);
Using react context
ThemeSelector.tsx : simple theme selector wite bulma classes and fortawesome
import React, {useContext} from "react";
import { faPalette } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {bulmaThemes, Theme, ThemeContext} from "react-bulma-theme";
const ThemeSelector: React.FC = () => {
const themeContext = useContext(ThemeContext);
return (
<div className="control has-icons-left">
<div className="select is-info">
<select onChange={({target}) => {
themeContext.setTheme(target.value as Theme);
localStorage.setItem("macaroniTheme", target.value);
}}
defaultValue={localStorage.getItem("macaroniTheme") || "default"}
>
{
bulmaThemes.map(theme =>
<option key={theme} value={theme}>{theme}</option>
)
}
</select>
</div>
<div className="icon is-small is-left">
<FontAwesomeIcon icon={faPalette} />
</div>
</div>
);
};
export default ThemeSelector;
App.tsx
import React, {useContext} from "react";
import ReactBulmaTheme, {Theme, ThemeContext} from "react-bulma-theme";
import ThemeSelector from "./ThemeSelector"
const App = () => {
const themeContext = useContext(ThemeContext);
return (
<ThemeContext.Provider
value={{
theme: themeContext.theme,
setTheme: themeContext.setTheme
}}>
<BulmaThemeApp theme="minty">
<ThemeSelector>
</BulmaThemeApp>
</ThemeContext.Provider>
);