archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-18 14:06:52 +00:00
Code Issues Projects Releases Wiki Activity
react-use/docs/useCss.md
streamich 61700675cd chore: 🤖 don't install only large dependencies 
This change removes useCallbag hook, it also reverts back changes for
hooks that only have tiny dependencies or dependencies that could have
been part of the hook itself. Effectivly only KeyboardJS and Rebound are
large packages that only partially are used by react-use, hence require
user to install them separately.

BREAKING CHANGE: 🧨 useCallbag hook is removed, some hooks KeyboardJS and Rebound installed
separately
2019-03-25 13:19:37 +01:00

1.0 KiB
Raw Blame History

useCss

React side-effect hook that changes CSS dynamically. Works like "virtual CSS" — it re-renders only CSS rules that change. It is different from inline styles, because you can use media queries and pseudo selectors.

Usage

import {useCss} from 'react-use';

const Demo = () => {
  const className = useCss({
    color: 'red',
    border: '1px solid red',
    '&:hover': {
      color: 'blue',
    },
  });

  return (
    <div className={className}>
      Hover me!
    </div>
  );
};

Examples

const className = useCss({
  color: 'tomato',
  '&:hover': {
    color: 'orange',
  },
});

const className = useCss({
  svg: {
    fill: 'tomato',
  },
  '.global_class &:hover svg': {
    fill: 'orange',
  },
});

const className = useCss({
  color: 'tomato',
  '@media only screen and (max-width: 600px)': {
    color: 'orange',
    '&:hover': {
      color: 'red',
    }
  },
});