https://github.com/marty-wang/stylist-react

Theming first, static typed styled component library for React
https://github.com/marty-wang/stylist-react

css-in-js react styled-components theme theming

Last synced: 2 months ago
JSON representation

Theming first, static typed styled component library for React

• Host: GitHub
• URL: https://github.com/marty-wang/stylist-react
• Owner: marty-wang
• License: mit
• Created: 2019-01-31T04:52:47.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T00:53:40.000Z (about 2 years ago)
• Last Synced: 2024-11-05T16:07:04.291Z (3 months ago)
• Topics: css-in-js, react, styled-components, theme, theming
• Language: TypeScript
• Homepage:
• Size: 674 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stylist

Theming first, fully static typed styled component library for React. 

## How to

1. Create your own stylist factory

```typescript

import { stylistFactory } from 'stylist-react';

/**

 * @param {string} namespace It allows multiple stylist factory.

 * @param {object} initialThemeConfig The configuration to build the initial theme. It can be empty if you are not yet ready for theming your app.

 * @param {function} buildThemeFunction It produces the actual theme for the given theme configuration

 * @returns {getStylist, setTheme} getStylist returns the stylist that can create styled components. setTheme can change themes.

 */

export const { getStylist, setTheme } = stylistFactory('MyNamespace', initialThemeConfig, buildThemeFunction);

```

2. Use getStylist to create style components. Keep in mind that stylist is always scoped to a component and is used to create styled sub-components to compose the aforementioned component

```typescript

// MyComponent.tsx

const { styleDiv } = getStylist('MyComponent');

const Root = styleDiv("Root", theme => ({

    height: "100vh",

    padding: "16px",

    background: theme.backgroundColor,

    color: theme.foregroundColor

}));

export class MyComponent extends React.Component {

    public render() {

      return (

          

          {this.props.children}

          

      );

    }

}

```

For details, Please take a look at the demo folder.