Narcoleptic's Patch Mangler

    @rneui/theming
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    @rneui/theming

    Your components with our theme provider

    Installation

    npm install @rneui/theming
    yarn add @rneui/theming

    Usage

    Declare types (if using typescript)

    interface Theme {
      spacing?: {
        sm: number;
        md: number;
        lg: number;
      };
      border?: {
        sm: number;
        md: number;
        lg: number;
      };
    }
    
    interface Pallette {
      light: string;
      main: string;
      dark: string;
    }
    
    interface Colors {
      primary: Pallette;
      secondary: Pallette;
    }
    const { createTheme, useTheme, ThemeProvider } = makeTheming<Theme, Colors>({
      spacing: { sm: 8, md: 10, lg: 12 },
      border: { sm: 8, md: 10, lg: 12 },
    });
    
    export { createTheme, useTheme, ThemeProvider };
    const theme = createTheme({
      darkColors: {
        primary: {
          main: "#02f300",
        },
      },
      lightColors: {
        primary: {
          main: "#000",
        },
        secondary: {
          main: "",
        },
      },
      spacing: {
        sm: 10,
        md: 20,
        lg: 30,
      },
    });
    
    const App = () => (
      <ThemeProvider theme={theme}>
        <Button title="Hello" />
      </ThemeProvider>
    );

    Using use-theme hook

    const Button = () => {
      const { theme, replaceTheme } = useTheme();
    
      const handleClick = () => {
        replaceTheme({ darkColors: { primary: { main: "red" } } });
      };
    
      return (
        <MyComponent color={theme.colors.primary.main} padding={theme.spacing.sm} />
      );
    };

    Using with-theme HOC

    interface MyComponentProps {
      disabled?: boolean;
    }

    Using default props for components

    interface ComponentTheme {
      MyComponent: MyComponentProps;
    }
    
    const { createTheme, withTheme, ThemeProvider } = makeTheming<
      {},
      Colors,
      ComponentTheme
    >();
    
    const theme = createTheme({
      MyComponent: {
        disabled: false,
      },
    });
    
    const App = () => {
      return (
        <ThemeProvider theme={theme}>
          <MyComponent />
        </ThemeProvider>
      );
    };
    
    const MyComponent = withTheme<MyComponentProps>((props) => {
      return <Button color={props.theme.colors.primary.main}></Button>;
    });

    Install

    npm i @rneui/theming

    DownloadsWeekly Downloads

    11

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    19.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • arpitbhalla