@oxidia/style-variance-authority v1.0.5

Style Variance Authority (SVA)

This utility is for managing style-based variant for ReactNative components
Inspired by the Class Variance Authority (CVA) package

Installation

# npm
npm install @oxidia/style-variance-authority

# yarn
yarn add @oxidia/style-variance-authority

# pnpm
pnpm install @oxidia/style-variance-authority

Usage

import { StyleSheet } from "react-native";
import { type StyleVariantProps, sva } from "@oxidia/style-variance-authority";

const styles = StyleSheet.create({
  bgWhite: {
    backgroundColor: "white",
  },

  h40: {
    height: 40,
  },

  opacity70: {
    opacity: 0.7,
  },
});

const buttonContainer = sva({
  base: styles.h40,

  variants: {
    variant: {
      solid: [styles.bgWhite, styles.h40],
      outline: {
        borderWidth: 1,
        borderColor: "black",
      },
    },
    disabled: {
      true: styles.opacity70,
      false: null,
    },
  },

  defaultVariants: {
    variant: "solid",
    disabled: false,
  },
});

const buttonContainerStyle = buttonContainer({
  variant: "solid",
  disabled: true,
});
/**
 * Result
 * [
 *   { height: 40 },
 *   [ { backgroundColor: 'white' }, { height: 40 } ],
 *   { opacity: 0.7 }
 * ]
 */

interface ButtonProps extends VariantProps<typeof buttonContainer> {}
// SVA offers the VariantProps helper to extract variant types

Credits

This package is inspired by the Class Variance Authority (CVA)

License

Apache-2.0 License