morewings / css-vars-hook Goto Github PK

View Code? Open in Web Editor NEW

22.0 1.0 0.0 2.03 MB

css-vars-hook contains React hooks to set and manipulate CSS custom properties from the component.

License: MIT License

JavaScript 22.65% HTML 1.42% TypeScript 75.93%

css-variables react react-hook css-custom-properties css-in-js css-in-react hook

css-vars-hook's People

Contributors

Stargazers

Watchers

css-vars-hook's Issues

Add numeric values support to theme

const theme = {
  numeric: {
    value: 6,
    unit: ‘px’,
  }
}

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

Detected dependencies

github-actions

.github/workflows/merge-jobs.yml

actions/checkout v4

styfle/cancel-workflow-action 0.12.1

actions/setup-node v4

pnpm/action-setup v2

actions/cache v4

.github/workflows/pages.yml

actions/checkout v4

styfle/cancel-workflow-action 0.12.1

actions/setup-node v4

pnpm/action-setup v3

actions/cache v4

actions/configure-pages v4

actions/upload-pages-artifact v3

actions/deploy-pages v4

.github/workflows/pull-request-jobs.yml

actions/checkout v4

styfle/cancel-workflow-action 0.12.1

actions/setup-node v4

pnpm/action-setup v3

actions/cache v4

npm

package.json

@commitlint/cli 19.2.0

@commitlint/config-conventional 19.1.0

@semantic-release/commit-analyzer 11.1.0

@semantic-release/git 10.0.1

@semantic-release/github 10.0.2

@semantic-release/npm 12.0.0

@semantic-release/release-notes-generator 12.1.0

@testing-library/jest-dom 6.4.2

@testing-library/react 14.2.1

@types/jest 29.5.12

@types/lodash 4.17.0

@types/react 18.2.66

@types/react-dom 18.2.22

@typescript-eslint/eslint-plugin 7.2.0

@typescript-eslint/parser 7.2.0

@vitejs/plugin-react 4.2.1

@yelo/rollup-node-external ^1.0.1

alias-hq 6.2.3

commitizen 4.3.0

commitlint 19.2.0

cz-conventional-changelog 3.3.0

classnames ^2.5.1

eslint 8.57.0

eslint-config-prettier 9.1.0

eslint-plugin-import 2.29.1

eslint-plugin-prettier 5.1.3

eslint-plugin-react 7.34.1

eslint-plugin-react-hooks 4.6.0

eslint-plugin-react-refresh 0.4.6

eslint-plugin-ssr-friendly 1.3.0

eslint-plugin-storybook 0.8.0

husky 9.0.11

identity-obj-proxy 3.0.0

is-ci 3.0.1

jest 29.7.0

jest-environment-jsdom 29.7.0

lint-staged 15.2.2

npm-run-all2 6.1.2

postcss 8.4.35

postcss-preset-env ^9.4.0

prettier 3.2.5

react 18.2.0

react-dom 18.2.0

semantic-release 23.0.4

stylelint 16.2.1

stylelint-config-standard 36.0.0

stylelint-order 6.0.4

stylelint-prettier 5.0.0

ts-jest 29.1.2

ts-node 10.9.2

typescript 5.4.2

vite 5.1.6

vite-plugin-dts ^3.7.3

react >=18.2.0

react-dom >=18.2.0

node >=16

nvm

.nvmrc

node v20

Check this box to trigger a request for Renovate to run again on this repository

Add Media queries support

Prefixes
https://propjockey.github.io/css-media-vars/

Improve hook jsdoc

https://stackoverflow.com/a/58105980/528136

https://medium.com/@antonkrinitsyn/jsdoc-with-react-hooks-eb64b64fff73

https://stackoverflow.com/a/56366427/528136

Add display name to LocalRoot component

Extract to external component to have proper displayName

css-vars-hook/src/lib/LocalTheme/useLocalTheme.tsx

Line 44 in 62c91e5

// eslint-disable-next-line react/display-name

Add night mode as a global example

Use <style> tag to store theme data

Theme variables can pollute DOM if injected into style attribute as it is. <style> tag may be a cleaner way to store theme. The standard requires <style> to be injected in the head. Though it works in all browsers and this approach is used in Emotion.

Possible solution

Render <style> tag inside body on server. Then transport it to the <head> with createPortal.

https://codesandbox.io/s/rf5b5?file=/src/App.js

https://stackoverflow.com/a/32658826/528136

Add css rainbow demo

https://www.joshwcomeau.com/react/rainbow-button/

Related #17

Add tests

add register property

https://web.dev/css-props-and-vals/

Refactor Demo page

At the moment, demo page uses logic which requires React to rerender components. Needs to be changed to non-rendering techniques.

Add schedule to Renovate bot

Add types definition

Improve docs add title to local and global examples

add title to local and global examples
add note about useEffect to setVariable and setTheme

The reason this code isn’t correct is that it tries to do something with the DOM node during rendering. In React, rendering should be a pure calculation of JSX and should not contain side effects like modifying the DOM.
Moreover, when VideoPlayer is called for the first time, its DOM does not exist yet! There isn’t a DOM node yet to call play() or pause() on, because React doesn’t know what DOM to create until you return the JSX.

The solution here is to wrap the side effect with useEffect to move it out of the rendering calculation:
By wrapping the DOM update in an Effect, you let React update the screen first. Then your Effect runs.

When your VideoPlayer component renders (either the first time or if it re-renders), a few things will happen. First, React will update the screen, ensuring the