# reactjs-stylesheet

> React.js Stylesheet object: a react-native-like and intuitive way to write jsx style in reactjs

Latest version **1.0.9** (published 2022-05-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactjs-stylesheet
pnpm add reactjs-stylesheet
yarn add reactjs-stylesheet
bun add reactjs-stylesheet
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-05-12 |
| First published | 2022-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | NicolaLovo |
| Maintainers | nicolalovo |
| Keywords | reactjs, stylesheet, css, styled-components, styled-jsx, inline-style |

## Links

- npm: https://www.npmjs.com/package/reactjs-stylesheet
- Repository: https://github.com/NicolaLovo/reactjs-stylesheet
- Homepage: https://github.com/NicolaLovo/reactjs-stylesheet#readme
- Issues: https://github.com/NicolaLovo/reactjs-stylesheet/issues
- npm.io page: https://npm.io/package/reactjs-stylesheet

## Dependencies (1)

- [@types/react](https://npm.io/package/@types/react.md) ^18.0.9

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2022-05-12
- 1.0.8 — 2022-05-12
- 1.0.7 — 2022-05-11
- 1.0.6 — 2022-05-11
- 1.0.5 — 2022-05-11
- 1.0.4 — 2022-05-11
- 1.0.3 — 2022-05-09
- 1.0.2 — 2022-05-08
- 1.0.0 — 2022-05-08

## README

# reactjs-stylesheet

## A more intuitive way to write jsx style in reactjs

[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)

reactjs-stylesheet is a package that simplifies the way you can write your style for react components in javascript. It takes inspiration from react-native Stylesheet and adds some extra features.

# Table of contents

- [The idea behind](#combine-javascript-and-css-features)
- [Intellisense support](#intellisense-support)
- [Installation](#installation)
- [Quick start](#quick-start)
- [Theme Handling](#theme-handling)
  - [Basic usage](#basic-usage-inside-a-component)
  - [Advanced usage](#advanced-usage-in-a-separate-style-module)
- [License](#license)

## Combine javascript and CSS, Features:

- Stylesheets with intellisense support in Visual Studio Code, no more style-name guessing!
- easy and reliable theme handling: now you can switch between all the themes you defined and change the colors of your site

## Intellisense support

![Intellisense support image](intellisenseSupport.png)

## Installation

Required [Node.js](https://nodejs.org/) v10+ to run.

```sh
npm i reactjs-stylesheet
```

## Quick start

In styles.ts or styles.js:

```js
import Stylesheet from "reactjs-stylesheet";
const styles = Stylesheet.create({
	container: {
		backgroundColor: "#81D4FA",
		color: "#263238",
		height: "100px",
	},
	button: {
		backgroundColor: "#039BE5",
		borderRadius: "5px",
		cursor: "pointer",
	},
	textDiv: {
		backgroundColor: "#64B5F6",
		width: "180px",
	},
});
export default styles;
```

In index.ts, or index.js:

```js
import React, { useState } from "react";
import styles from "./styles";

const MyComponent = () => {
	const [theme, setTheme] = useState("light");
	return (
		<div style={styles.container}>
			<div>
				<button
					style={styles.button}
					onClick={() => {
						alert("clicked");
					}}
				>
					Styled button
				</button>
				<div style={styles.textDiv}>
					Styled with <br /> reactjs-stylesheet!
				</div>
			</div>
		</div>
	);
};

export default MyComponent;
```

# Theme handling

## Basic usage inside a component

```js
import React, { useState } from "react";
import Stylesheet from "reactjs-stylesheet";
const themes: {
	[themeName: string]: {
		[key: string]: string,
	},
} = {
	light: {
		primary: "#E3F2FD",
		secondary: "#64B5F6",
	},
	dark: {
		primary: "#ECEFF1",
		secondary: "#90A4AE",
	},
};
const MyComponent = () => {
	const [theme, setTheme] = useState("light");
	const styles = Stylesheet.createWithTheme(themes[theme], (colors) => {
		return {
			container: {
				backgroundColor: colors.background,
				color: colors.textColor,
			},
			button: {
				backgroundColor: colors.touchable,
			},
			text: {
				backgroundColor: colors.secondary,
				color: colors.textColor,
			},
		};
	});
	return <div style={styles.container}>myComponent</div>;
};
```

## Advanced usage in a separate style module

In styles.ts or styles.js:

```js
import Stylesheet from "reactjs-stylesheet";
import { Colors } from "reactjs-stylesheet/lib/types";
const getStyles = (colors: Colors) => {
	//return the styles you want to use
	return Stylesheet.createWithTheme(colors, (colors) => {
		return {
			container: {
				backgroundColor: colors.background,
				color: colors.textColor,
			},
			button: {
				backgroundColor: colors.touchable,
			},
			text: {
				backgroundColor: colors.secondary,
				color: colors.textColor,
			},
		};
	});
};
export default getStyles;
```

In index.ts, or index.js:

```js
//in index.ts (or .js)
import React, { useState } from "react";
import getStyles from "./styles";
const themes: {
	[themeName: string]: {
		[key: string]: string,
	},
} = {
	light: {
		primary: "#E3F2FD",
		secondary: "#64B5F6",
	},
	dark: {
		primary: "#ECEFF1",
		secondary: "#90A4AE",
	},
};
const MyComponent = () => {
	const [theme, setTheme] = useState("light");
	const styles = getStyles(themes[theme]);
	return <div style={styles.container}>myComponent</div>;
};
export default MyComponent;
```

## License

MIT
**Free Software, try it out!**

---
_Source: https://npm.io/package/reactjs-stylesheet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._