Intro to Plugins

gluestack-style provides a plugin system to extend the existing functionality of the styled function, making it ideal for adding support for new aliases, tokens, and more.

IStyledPlugin

The plugin system includes an interface called IStyledPlugin. This interface defines a set of methods that plugins can use to register themselves with the library, process styled objects, and handle React components.

interface IStyledPlugin {
  styledUtils?: IStyled;
  register(styledUtils: IStyled): void;
  inputMiddleWare(styledObj: any): void;
  componentMiddleWare?(props: any): void;
}

Step
1
:
styledUtils: This is an instance of IStyled that is passed in to the plugin.

class IStyled {
  aliases?: any;
  tokens?: any;
  ref?: any;
}

Step
2
:
register: This method allows a plugin to register itself with the library by passing in an instance of IStyled. This method should be called during the plugin's initialization to set up the configuration.
Step
3
:
inputMiddleWare: This method accepts the style object, allowing plugins to process or modify it before it is passed to the styled function. This could be useful for things like adding or modifying style object, or applying styles conditionally based on props or other factors.
Step
4
:
componentMiddleWare: This optional method allows plugins to access the React component being styled. This could be useful for plugins that need to perform more complex operations based on the component, such as adding or modifying props, or interacting with component lifecycle methods.

Usage:

You can use plugins inside your config:

export const config = {
  aliases: {},
  tokens: {},
  plugins: [new MyPlugin()],
}

Edit this page on GitHub