Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fanhaoyuan/vc-state
Easily to compose scoped state in Vue.js
https://github.com/fanhaoyuan/vc-state
context hooks provider state-management vue
Last synced: about 1 month ago
JSON representation
Easily to compose scoped state in Vue.js
- Host: GitHub
- URL: https://github.com/fanhaoyuan/vc-state
- Owner: fanhaoyuan
- License: mit
- Created: 2021-12-28T06:20:51.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T17:17:44.000Z (almost 2 years ago)
- Last Synced: 2024-10-28T14:49:13.053Z (about 1 month ago)
- Topics: context, hooks, provider, state-management, vue
- Language: TypeScript
- Homepage:
- Size: 92.8 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-state - vc-state
README
vc-state
Easily to compose scoped state in Vue.js
## Examples in CodeSandbox
- [ThemeContextProvider](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/theme-context-provider)
- [OverridingProviders](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/overriding-providers)
- [NestedProviders](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/nested-providers)
## Install
### NPM
```bash
>$ npm install vc-state
# or using yarn
>$ yarn install vc-state
# or using pnpm
>$ pnpm add vc-state
```
### CDN
```html
```
## Basic Usage Examples (ThemeContextProvider)
```tsx
import { computed, defineComponent, ref } from 'vue';
import { createContext } from 'vc-state';
type Theme = 'dark' | 'light';
interface ThemeContextProviderProps {
defaultTheme: Theme;
lightColor?: string;
darkColor?: string;
}
// Defined Required Props in useValue function
const [ThemeContextProvider, useThemeContext] = createContext((props: ThemeContextProviderProps) => {
const theme = ref(props.defaultTheme);
const toggleTheme = () => (theme.value = theme.value === 'dark' ? 'light' : 'dark');
return { theme, toggleTheme };
});
const Button = defineComponent({
name: 'Button',
setup() {
const { toggleTheme, theme } = useThemeContext();
return () => {
return to {theme.value === 'dark' ? 'light' : 'dark'};
};
},
});
const Panel = defineComponent({
name: 'Panel',
setup() {
const { theme } = useThemeContext();
const currentThemeColor = computed(() => (theme.value === 'dark' ? '#000' : '#fff'));
const oppositeThemeColor = computed(() => (theme.value === 'dark' ? '#fff' : '#000'));
return () => {
return (
I'm in {theme.value} mode
);
};
},
});
export default defineComponent({
name: 'App',
setup() {
return () => (
// defaultTheme is required
// lightColor and darkColor are optional
);
},
});
```
## API
### createContext
`createContext(useValue[, ...hooks]): Context`
It will return a context which compose with `initial context` and `patch context`
#### useValue
This is required in a `createContext`.
This function returns an object which is `initial context`.
```ts
import { createContext } from 'vc-state';
const context = createContext((props: { a: string }) => {
return {
b: '',
};
});
// In Vue Components
console.log(context.useContext()); // { b: '' }
```
#### hooks
`Hooks` is a group of optional functions in `createContext`.
It receives `initial context` in the first parameter. And it will return a object which is `patch context`, it Will compose with `initial context`.
```ts
import { createContext } from 'vc-state';
const context = createContext(
(props: { a: string }) => {
return {
b: '',
};
},
initialContext => {
console.log(initialContext.b); // ''
return {
c: 1,
};
}
);
// In Vue Components
console.log(context.useContext()); // { b: '', c: 1 }
```
### displayName
We can set custom displayName in `vue-tools` for `Provider`. Default is `Provider`.
Added in `v1.2.0`.
```ts
import { createContext } from 'vc-state';
const [ContextProvider, useThemeContext] = createContext(() => {
return {
// context
};
});
ContextProvider.displayName = 'ThemeContextProvider';
export { ContextProvider, useThemeContext };
```
## License
[MIT](./LICENSE)