# toolazy-react-theme
> Theme manager for **React** and **React Native** projects.
> Make sure you are using React version 16.8.0 / React Native version 0.59 or higher.
# Quick start
We expect you having an existing react application - if not give [create-react-app](https://github.com/facebook/create-react-app) / [react-native init](https://reactnative.dev/docs/environment-setup) a try.
I will show you step-by-step to use this library.
### First: Installation
toolazy-react-theme is delivered primarily via npm
.
()
```sh
# using npm install
$ npm i toolazy-react-theme
```
### Second: Configure toolazy-react-theme
Create a new file ```theme.js``` beside your ```index.js``` containing following content:
```js
import {toolazyReactTheme} from 'toolazy-react-theme';
const DarkTheme = {
tabBarActive: '#FFF',
tabBarInactive: 'green',
};
const LightTheme = {
tabBarActive: 'red',
tabBarInactive: 'rgba(0,0,0,.27)',
};
toolazyReactTheme.init({
themesResource: {
dark: DarkTheme,
light: LightTheme,
},
currentTheme: 'dark',
});
export default toolazyReactTheme;
```
Then import that in index.js:
```js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import './theme'; // I'm here.
AppRegistry.registerComponent(appName, () => App);
```
Everything is ready, but how to use it? Let's go...
### Third: Usage example
The components you need to use `theme` variable must be wrapped by `withToolazyReactTheme` HOC.
With Class component:
```js
import React from 'react';
import {Text} from 'react-native';
// the Higher-order component (HOC)
import {withToolazyReactTheme} from 'toolazy-react-theme';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props); // You theme should be here.
const {theme} = this.props;
return Hi friend
}
}
// Wrap your component with HOC
export default withToolazyReactTheme()(MyComponent);
```
With Function component:
```js
import React from 'react';
import {Text} from 'react-native';
// the Higher-order component (HOC)
import {withToolazyReactTheme} from 'toolazy-react-theme';
const MyComponent = (props) => {
return (
<>
Hi friend
);
}
// Wrap your component with HOC
export default withToolazyReactTheme()(MyComponent);
```
### Fourth: Change theme
The interesting part here is ```Theme.changeTheme(theme)``` which will make current theme you pass available for all the components wrapped by withToolazyReactTheme()(MyComponent)
At the Configure step, you have been created a config file called ```theme.js```, you can import to anywhere and use it:
```js
import React from 'react';
import {View, Button} from 'react-native';
import Theme from 'path/to/theme.js';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
)
}
}
```
### Methods
| Methods | Description |
| :---: | --- |
| `Theme.changeTheme(theme)` | `theme`: `String` Ex: `'dark'` or `'light'` This function make your app change `theme` variable and apply to all the components wrapped by `withToolazyReactTheme` Higher-order Component |
| `Theme.getThemesResource()` | Return your theme resource. It's an object. |
| `Theme.getCurrentTheme()` | Return the current theme name. It's a string. |
| `Theme.getTheme()` | Return the theme you're using. It's an object |
# Tips Tricks
You no need to use Redux to manage your themes. Say no to `connect()` `mapStateToProps` `mapDispatchToProps` if it's not needed.
You can `import Theme from 'path/to/theme.js'` everywhere and use all methods above.
### Tip 1: Detect your theme has been changed.
Let's say you have 2 components called **MyComponent** and **ToggleComponent**.
**MyComponent** is using `theme` and **ToogleComponent** is not.
**ToggleComponent** make a change theme action. You need to detect and do something in **MyComponent**.
Create **toogle-component.js** file
```js
import React from 'react';
import Theme from 'path/to/theme.js';
const ToggleComponent = () => {
return (
.
(