npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fluentui-react-native/themed-stylesheet

v1.6.1

Published

Helper for using react-native StyleSheets with themes

Downloads

364

Readme

Themed StyleSheet

A convenience wrapper to create style sheets which depend upon values in a theme, and use them in a manner where they are built and cached once per theme. This doesn't have a huge amount of code, it is mainly about standardizing the usage patterns.

Caching Strategy

The style sheets will be cached in the themes themselves under a common symbol key. Each style sheet will have a unique symbol key as part of its closure that keeps the caches distinct.

In the case where no theme is provided they will be cached in a single internal global cache.

Implementation

This function provides a caching layer around a function that produces a set of named styles from a theme.

export type INamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };

export function themedStyleSheet<T extends INamedStyles<T>>(
  generator: (theme: object) => INamedStyles<T>
): (theme: object) => INamedStyles<T> {

The INamedStyles type matches the NamedStyles type in the react-native types project for use with StyleSheet.create. It is a set of types which extend either ViewStyle, TextStyle, or ImageStyle. Note that this is a mapped type where the type will be inferred from the return value of the function provided to themedStyleSheet. The mapping ensures that if your stylesheet has two sheets called sheet1 and sheet2, TypeScript can infer the existence of these entries when using the sheet in code.

Usage of themedStyleSheet is designed to be very similar to that of StyleSheet.create and replace that usage when style sheets should be theme aware.

So normal style sheet usage would look something like this:

const styles = StyleSheet.create({
  style1: {
    backgroundColor: 'blue'
  },
  style2: {
    backgroundColor: 'red'
  }
})

const MyComponent = (props: IMyProps) => {
  return <MyComponent style={styles.style1}>;
}

Using a themed style sheet, given a theme type called ITheme would look something like this:

const getThemedStyles = themedStyleSheet((t: ITheme) => {
  return {
    style1: {
      backgroundColor: t.palette.buttonBackground || 'gray'
    },
    style2: {
      backgroundColor: t.palette.windowBackground || 'white'
    }
  };
});

const MyComponent = (props: IMyProps) => {
  const theme = React.useContext(ThemeContext);
  const styles = getThemedStyles(theme);
  return <MyComponent style={styles.style1}>;
}

Variations

In practice there are a couple of practices that can be adopted when using this routine.

Strongly typed themes

Note that the theme type is generic for the base implementation, this is to allow the type signature of the style sheet to be easily inferred.

If the theme should be strongly typed a theming system can provide a wrapped implementation with the theme strongly typed. This could optionally include the call to useContext. Including useContext in the implementation is great in the simple case but would either require a different signature or a second useContext call if the theme needs to be used elsewhere.

Empty themes

It is allowed to have a null or undefined theme, if that happens the stylesheet will be cached at the global level. If it is possible for the theme to be null or undefined in your theming system the functions should be written with that in mind. Using the example above this might look like:

const getThemedStyles = themedStyleSheet((t: ITheme) => {
  return {
    style1: {
      backgroundColor: (t && t.palette.buttonBackground) || 'gray'
    },
    style2: {
      backgroundColor: (t && t.palette.windowBackground) || 'white'
    }
  };
});