wp-components

How to use?

1. Install package

   npm i --save wp-components

2. Set-up Theme context and provider This is important part. As our component is using prop.theme from styled-component, we have to follow this step to make our component work properly.

    import { WPThemeProvider } from  'wp-components'
   
    <WPThemeProvider>
        <App /> 
    </WPThemeProvider>
   

Now you can import component and use it.

How to use WPThemeContext? ( Change themes )

You can use WPThemeContext with useContext hook. This will return two things.

1. switchTheme : Method This will accept one argument, that is name of theme. These are theme names

   'PassionOrange' | 'Classic' | 'Green' | 'Blue' | 'Purple'

2. theme : Current theme

To change all components theme, you simply need to use switchTheme method. It'll apply on all component.

import { Button, WPThemeContext } from  'wp-components';
...
...
const { switchTheme } = useContext(WPThemeContext);

const  changeTheme = (color: ThemeName) => {
    switchTheme(color);
};
...
...
return(
    <Button  maxContent  primary  onClick={() =>  changeTheme('Green')}>
	    Green
    </Button>
)