jss-plugin-rule-value-function

What is jss-plugin-rule-value-function?

The jss-plugin-rule-value-function package is a plugin for JSS (JavaScript Style Sheets) that allows you to use functions as values in your style rules. This can be particularly useful for dynamic styling based on props or other runtime conditions.

What are jss-plugin-rule-value-function's main functionalities?

Dynamic Styling

This feature allows you to define styles that can change dynamically based on the properties passed to the component. In this example, the button's color and background color are determined by the props `color` and `bgColor`.

const styles = {
  button: {
    color: props => props.color,
    backgroundColor: props => props.bgColor
  }
};

const useStyles = createUseStyles(styles);

function Button(props) {
  const classes = useStyles(props);
  return <button className={classes.button}>Click me</button>;
}

Conditional Styling

This feature allows you to apply conditional styling based on the properties. In this example, the button's color and background color change based on whether the `isPrimary` prop is true or false.

const styles = {
  button: {
    color: props => props.isPrimary ? 'blue' : 'gray',
    backgroundColor: props => props.isPrimary ? 'lightblue' : 'lightgray'
  }
};

const useStyles = createUseStyles(styles);

function Button(props) {
  const classes = useStyles(props);
  return <button className={classes.button}>Click me</button>;
}

Other packages similar to jss-plugin-rule-value-function

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components. Unlike jss-plugin-rule-value-function, styled-components is more focused on creating styled components rather than applying dynamic styles through functions.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. Similar to jss-plugin-rule-value-function, Emotion supports dynamic styling, but it also offers more features like theming and server-side rendering.

aphrodite

Aphrodite is a CSS-in-JS library that allows you to write styles in JavaScript and apply them to your components. It supports media queries and pseudo-selectors. While it does not use functions for dynamic styling like jss-plugin-rule-value-function, it offers a straightforward API for styling components.

README

jss-plugin-rule-value-function

JSS plugin for function value and rule syntax

See our website jss-plugin-rule-value-function for more information.

Install

Using npm:

npm install jss-plugin-rule-value-function

or using yarn:

yarn add jss-plugin-rule-value-function

Changelog

10.10.0 (2023-2-9)

Improvements

• [jss] Added support for @container query 1637