https://github.com/gadingnst/react-styles-hook
Simple hook for simplify CSS styling in React JS. Very Light-weight.
https://github.com/gadingnst/react-styles-hook
Last synced: 8 months ago
JSON representation
Simple hook for simplify CSS styling in React JS. Very Light-weight.
- Host: GitHub
- URL: https://github.com/gadingnst/react-styles-hook
- Owner: gadingnst
- License: mit
- Created: 2020-01-25T13:28:27.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-22T12:28:59.000Z (about 3 years ago)
- Last Synced: 2025-05-08T00:05:43.323Z (8 months ago)
- Language: TypeScript
- Homepage: https://sutanlab.js.org/react-styles-hook
- Size: 462 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Styles Hook
[](https://travis-ci.org/sutanlab/react-styles-hook) [](https://www.npmjs.com/package/react-styles-hook) [](https://npm-stat.com/charts.html?package=react-styles-hook)
> Simple hook for simplify CSS styling in React JS. Very Light-weight.
## Table of contents
- [React Styles Hook](#react-styles-hook)
- [Table of contents](#table-of-contents)
- [Why ?](#why)
- [Here is the screenshots:](#here-is-the-screenshots)
- [Installation](#installation)
- [Example Usage](#example-usage)
- [Standard styles Example](#standard-styles-example)
- [Dynamic styles example](#dynamic-styles-example)
## Why ?
In ReactJS, sometimes we have difficulty to styling because of limitations `types` intellisense in CSS properties. By using this hook we can find out what properties in CSS we can use.
If you don't get what i'm talking about, maybe i will explain in essence: This hook API is almost similiar to [React Native Stylesheet.create()](https://facebook.github.io/react-native/docs/style).
#### Here is the screenshots:
[](https://raw.githubusercontent.com/sutanlab/react-styles-hook/master/captures/capture-1.png)
[](https://raw.githubusercontent.com/sutanlab/react-styles-hook/master/captures/capture-2.png)
[](https://raw.githubusercontent.com/sutanlab/react-styles-hook/master/captures/capture-3.png)
---
## Installation
```bash
# with npm
$ npm i react-styles-hook --save
# with yarn
$ yarn add react-styles-hook
```
## Example Usage
### Standard styles Example
```js
import React from 'react'
import { useStyles } from 'react-styles-hook'
const App = () => (
Hello React 👋
)
const styles = useStyles({
container: {
height: 100,
width: '100%',
color: 'white',
backgroundColor: 'skyblue'
},
title: {
fontSize: 18,
fontWeight: 'bold'
}
})
export default App
```
### Dynamic styles example
```js
import React, { useState } from 'react'
import { useStyles } from 'react-styles-hook'
const App = () => {
const [isPink, switchPink] = useState(false)
const styles = useStyles({
heading: {
width: '100%',
backgroundColor: isPink ? '#f75172' : '#333333'
}
})
const handleClick = () => {
switchPink(!isPink)
}
return (
<>
Hello React 👋
Click Me!
>
)
}
export default App
```
---
© 2020 Sutan Gading Fadhillah Nasution.