{"id":13511375,"url":"https://github.com/fanhaoyuan/vc-state","last_synced_at":"2026-03-13T18:05:46.306Z","repository":{"id":57391060,"uuid":"442369449","full_name":"fanhaoyuan/vc-state","owner":"fanhaoyuan","description":"Easily to compose scoped state in Vue.js","archived":false,"fork":false,"pushed_at":"2023-01-12T17:17:44.000Z","size":95,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-28T14:49:13.053Z","etag":null,"topics":["context","hooks","provider","state-management","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fanhaoyuan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-28T06:20:51.000Z","updated_at":"2023-05-05T13:08:37.000Z","dependencies_parsed_at":"2023-02-09T12:45:23.262Z","dependency_job_id":null,"html_url":"https://github.com/fanhaoyuan/vc-state","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fanhaoyuan%2Fvc-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fanhaoyuan%2Fvc-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fanhaoyuan%2Fvc-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fanhaoyuan%2Fvc-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fanhaoyuan","download_url":"https://codeload.github.com/fanhaoyuan/vc-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222581265,"owners_count":17006322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context","hooks","provider","state-management","vue"],"created_at":"2024-08-01T03:00:48.639Z","updated_at":"2026-03-13T18:05:46.238Z","avatar_url":"https://github.com/fanhaoyuan.png","language":"TypeScript","funding_links":[],"categories":["vue"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003evc-state\u003c/h1\u003e\n\nEasily to compose scoped state in Vue.js\n\n\u003ca href=\"https://unpkg.com/vc-state\"\u003e\u003cimg alt=\"Size\" src=\"https://img.badgesize.io/https://unpkg.com/vc-state\"\u003e\u003c/a\u003e\n\u003ca href=\"https://npmjs.com/package/vc-state\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vc-state.svg\" alt=\"npm package\"\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n## Examples in CodeSandbox\n\n-   [ThemeContextProvider](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/theme-context-provider)\n-   [OverridingProviders](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/overriding-providers)\n-   [NestedProviders](https://codesandbox.io/s/github/fanhaoyuan/vc-state/tree/master/examples/nested-providers)\n\n## Install\n\n### NPM\n\n```bash\n\u003e$ npm install vc-state\n\n# or using yarn\n\u003e$ yarn install vc-state\n\n# or using pnpm\n\u003e$ pnpm add vc-state\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vc-state/dist/vc-state.min.js\"\u003e\u003c/script\u003e\n```\n\n## Basic Usage Examples (ThemeContextProvider)\n\n```tsx\nimport { computed, defineComponent, ref } from 'vue';\nimport { createContext } from 'vc-state';\n\ntype Theme = 'dark' | 'light';\n\ninterface ThemeContextProviderProps {\n    defaultTheme: Theme;\n    lightColor?: string;\n    darkColor?: string;\n}\n\n// Defined Required Props in useValue function\nconst [ThemeContextProvider, useThemeContext] = createContext((props: ThemeContextProviderProps) =\u003e {\n    const theme = ref\u003cTheme\u003e(props.defaultTheme);\n    const toggleTheme = () =\u003e (theme.value = theme.value === 'dark' ? 'light' : 'dark');\n    return { theme, toggleTheme };\n});\n\nconst Button = defineComponent({\n    name: 'Button',\n    setup() {\n        const { toggleTheme, theme } = useThemeContext();\n        return () =\u003e {\n            return \u003cbutton onClick={toggleTheme}\u003eto {theme.value === 'dark' ? 'light' : 'dark'}\u003c/button\u003e;\n        };\n    },\n});\n\nconst Panel = defineComponent({\n    name: 'Panel',\n    setup() {\n        const { theme } = useThemeContext();\n        const currentThemeColor = computed(() =\u003e (theme.value === 'dark' ? '#000' : '#fff'));\n        const oppositeThemeColor = computed(() =\u003e (theme.value === 'dark' ? '#fff' : '#000'));\n\n        return () =\u003e {\n            return (\n                \u003cdiv\n                    style={{\n                        backgroundColor: currentThemeColor.value,\n                        border: `1px ${oppositeThemeColor.value} solid`,\n                        width: '300px',\n                        height: '300px',\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        fontSize: '20px',\n                        color: oppositeThemeColor.value,\n                    }}\n                \u003e\n                    \u003cp\u003eI'm in {theme.value} mode\u003c/p\u003e\n                \u003c/div\u003e\n            );\n        };\n    },\n});\n\nexport default defineComponent({\n    name: 'App',\n    setup() {\n        return () =\u003e (\n            // defaultTheme is required\n            // lightColor and darkColor are optional\n            \u003cThemeContextProvider defaultTheme='light'\u003e\n                \u003cPanel /\u003e\n                \u003cButton /\u003e\n            \u003c/ThemeContextProvider\u003e\n        );\n    },\n});\n```\n\n## API\n\n### createContext\n\n`createContext(useValue[, ...hooks]): Context`\n\nIt will return a context which compose with `initial context` and `patch context`\n\n#### useValue\n\nThis is required in a `createContext`.\n\nThis function returns an object which is `initial context`.\n\n```ts\nimport { createContext } from 'vc-state';\n\nconst context = createContext((props: { a: string }) =\u003e {\n    return {\n        b: '',\n    };\n});\n\n// In Vue Components\nconsole.log(context.useContext()); //  { b: '' }\n```\n\n#### hooks\n\n`Hooks` is a group of optional functions in `createContext`.\n\nIt receives `initial context` in the first parameter. And it will return a object which is `patch context`, it Will compose with `initial context`.\n\n```ts\nimport { createContext } from 'vc-state';\n\nconst context = createContext(\n    (props: { a: string }) =\u003e {\n        return {\n            b: '',\n        };\n    },\n    initialContext =\u003e {\n        console.log(initialContext.b); // ''\n\n        return {\n            c: 1,\n        };\n    }\n);\n\n// In Vue Components\nconsole.log(context.useContext()); //  { b: '', c: 1 }\n```\n\n### displayName\n\nWe can set custom displayName in `vue-tools` for `Provider`. Default is `Provider`.\n\nAdded in `v1.2.0`.\n\n```ts\nimport { createContext } from 'vc-state';\n\nconst [ContextProvider, useThemeContext] = createContext(() =\u003e {\n    return {\n        // context\n    };\n});\n\nContextProvider.displayName = 'ThemeContextProvider';\n\nexport { ContextProvider, useThemeContext };\n```\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffanhaoyuan%2Fvc-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffanhaoyuan%2Fvc-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffanhaoyuan%2Fvc-state/lists"}