react-bulma-theme v1.0.4

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>
 );