2.0.1 • Published 4 years ago
react-css-hooks v2.0.1
react-css-hooks
This hook works like useState but uses CSS variables for storing.
Install
yarn add react-css-hooks
npm install react-css-hooks
Usage (useDataState)
import React, { useRef } from "react";
import { useDataState } from "react-css-hooks";
const formDataRef = useRef(null);
const data = { name: "Hasan Ali", age: "27" };
const {
name: [name, setName],
age: [age, setAge],
} = useDataState(data, formDataRef);
setName("Serkan");
setAge("33");
Usage (useMediaQuery)
import React from "react";
import { useMediaQuery } from "react-css-hooks";
const [breakpoint, onScreen] = useMediaQuery();
if (onScreen("xl", "lg")) {
// The screen size is between xl and lg
}
// Current breakpoint (xs, sm, md, lg, xl)
console.log(breakpoint);
Usage (useSelectorState)
import React from "react";
import { useSelectorState } from "react-css-hooks";
const cssVars = {
color: "--color", // The value of the variable comes from CSS
bg: {
key: "--background-color",
value: "red",
},
};
const {
bg: [bg, setBg],
color: [color, setColor],
} = useSelectorState(cssVars);
setBg("blue");
setColor("white");