kaisermann / Svelte Css Vars
Licence: mit
✨ Ever wanted to have reactive css variables in svelte? What if I told you there's a way?
Stars: ✭ 150
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Svelte Css Vars
deep-state-observer
State library for high performance applications.
Stars: ✭ 25 (-83.33%)
Mutual labels: reactive, state
svelte-style-directive
A custom Svelte preprocessor to add support for style directive.
Stars: ✭ 19 (-87.33%)
Mutual labels: svelte, css-variables
agile
🌌 Global State and Logic Library for JavaScript/Typescript applications
Stars: ✭ 90 (-40%)
Mutual labels: reactive, state
Redux Zero
A lightweight state container based on Redux
Stars: ✭ 1,977 (+1218%)
Mutual labels: state, svelte
Mobx React Form
Reactive MobX Form State Management
Stars: ✭ 1,031 (+587.33%)
Mutual labels: reactive, state
Store
A beautifully-simple framework-agnostic modern state management library.
Stars: ✭ 204 (+36%)
Mutual labels: reactive, state
immerx-state
Reactive, fractal and no-nonsense state management with Immer
Stars: ✭ 19 (-87.33%)
Mutual labels: reactive, state
svelte-micro
Light & reactive one-component router for Svelte
Stars: ✭ 81 (-46%)
Mutual labels: reactive, svelte
React Easy Params
🔗 Auto synchronize your state with the URL and LocalStorage.
Stars: ✭ 73 (-51.33%)
Mutual labels: reactive, state
svelte-themer
A theming engine for your Svelte apps using CSS Variables, persisted.
Stars: ✭ 88 (-41.33%)
Mutual labels: svelte, css-variables
Swiftdux
Predictable state management for SwiftUI applications.
Stars: ✭ 130 (-13.33%)
Mutual labels: reactive, state
Sb Admin Svelte
StartBootstrap SB Admin rebuilt using Svelte + Sveltestrap
Stars: ✭ 143 (-4.67%)
Mutual labels: svelte
Kefir
A Reactive Programming library for JavaScript
Stars: ✭ 1,769 (+1079.33%)
Mutual labels: reactive
R2dbc Pool
Connection Pooling for Reactive Relational Database Connectivity
Stars: ✭ 141 (-6%)
Mutual labels: reactive
Stimulus reflex
Build reactive applications with the Rails tooling you already know and love.
Stars: ✭ 1,928 (+1185.33%)
Mutual labels: reactive
svelte-css-vars
Ever wanted to have reactive css variables in svelte? What if I told you there's a way?
svelte-css-vars
exposes a svelte action which receives an object of properties that should be treated as css custom properties. By defining this object inside a $:{}
reactive block, svelte-css-vars
can update those css properties on the fly whenever some of its values change.
Usage
import cssVars from 'svelte-css-vars';
After importing the module, just define the reactive object of your custom properties:
let some_state_variable = true;
$: styleVars = {
titleColor: some_state_variable ? 'red' : 'blue',
};
And then use the action, passing the object, on the desired element:
<style>
div {
color: var(--titleColor);
}
</style>
<div use:cssVars="{styleVars}">
<!-- anything here will have access to var(--titleColor) -->
</div>
Example
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].