wp-components
TypeScript icon, indicating that this package has built-in type declarations

1.4.83 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i wp-components

Weekly Downloads

2

Version

1.4.83

License

ISC

Unpacked Size

1.22 MB

Total Files

553

Last publish

Collaborators

  • manishwp