zephraph / Vue Context Api
Licence: mit
A react-like context component api for Vue.js
Stars: ✭ 19
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Context Api
String
Provides an object-oriented API to strings and deals with bytes, UTF-8 code points and grapheme clusters in a unified way.
Stars: ✭ 709 (+3631.58%)
Mutual labels: component
Canvas Datagrid
Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
Stars: ✭ 798 (+4100%)
Mutual labels: component
Var Dumper
The VarDumper component provides mechanisms for walking through any arbitrary PHP variable. It provides a better dump() function that you can use instead of var_dump().
Stars: ✭ 6,833 (+35863.16%)
Mutual labels: component
Vue.d3.tree
Vue component to display tree based on D3.js layout.
Stars: ✭ 726 (+3721.05%)
Mutual labels: component
Orbit
React components of open-source Orbit design system by Kiwi.com
Stars: ✭ 774 (+3973.68%)
Mutual labels: component
Web3 React
🧰 A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps
Stars: ✭ 788 (+4047.37%)
Mutual labels: context
Vue Typer
Vue component that simulates a user typing, selecting, and erasing text.
Stars: ✭ 691 (+3536.84%)
Mutual labels: component
Polyfill Intl Normalizer
This component provides a fallback implementation for the Normalizer class provided by the Intl extension.
Stars: ✭ 896 (+4615.79%)
Mutual labels: component
React Native Flash Message
React Native flashbar and top notification alert utility
Stars: ✭ 789 (+4052.63%)
Mutual labels: component
Translation
The Translation component provides tools to internationalize your application.
Stars: ✭ 6,196 (+32510.53%)
Mutual labels: component
Multityperecyclerviewadapter
一个专注于RecyclerView优雅刷新(接管资源和数据源)、高灵活、低耦合、健壮性以及高效性的MVP模式库,支持大多数Adapter
Stars: ✭ 763 (+3915.79%)
Mutual labels: component
React Native Star Rating
A React Native component for generating and displaying interactive star ratings
Stars: ✭ 724 (+3710.53%)
Mutual labels: component
Polyfill Intl Grapheme
This component provides a partial, native PHP implementation of the Grapheme functions from the Intl extension.
Stars: ✭ 690 (+3531.58%)
Mutual labels: component
Polyfill Php80
This component provides functions unavailable in releases prior to PHP 8.0.
Stars: ✭ 798 (+4100%)
Mutual labels: component
Compinstall
Delphi utility app to auto-install component packages into IDE
Stars: ✭ 19 (+0%)
Mutual labels: component
Modularized wan android
用玩Android学习android - 组件化 - and more.. (Retrofit + MVP + 组件化的玩Android)
Stars: ✭ 16 (-15.79%)
Mutual labels: component
Vuestar
✨A like button with delightful star animation powered by Vue.js
Stars: ✭ 815 (+4189.47%)
Mutual labels: component
vue-context-api
A react-like context component api for Vue.js
Installation
npm install --save vue-context-api
or
yarn add vue-context-api
Example Usage
See a live example.
ThemeContext.js
import { createContext } from "vue-context-api";
// The argument passed to createContext is the default context value
export const { Provider, Consumer } = createContext("light");
App.vue
<template>
<!-- value can be reactive. Overrides the default value passed into createContext -->
<ThemeProvider value="dark">
<ThemedButton/>
</ThemeProvider>
</template>
<script>
import ThemedButton from "./ThemedButton";
import { Provider as ThemeProvider } from "./ThemeContext";
export default {
components: {
ThemedButton,
ThemeProvider
}
};
</script>
ThemedButton.vue
<template>
<ThemeConsumer>
<button slot-scope="theme" :style="setTheme(theme)"/>
</ThemeConsumer>
</template>
<script>
import { Consumer as ThemeConsumer } from "./ThemeContext";
export default {
components: {
ThemeConsumer
},
methods: {
setTheme(theme) {
return theme === 'light'
? 'background-color: white'
: 'background-color: black'
}
}
}
</script>
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].