{"id":24018609,"url":"https://github.com/ryancoll/nextjs-bootstrap-context","last_synced_at":"2026-06-13T12:06:07.668Z","repository":{"id":139649224,"uuid":"459888015","full_name":"RyanColl/NextJs-Bootstrap-Context","owner":"RyanColl","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-16T18:54:26.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T21:35:11.895Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RyanColl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-16T06:57:06.000Z","updated_at":"2022-02-16T06:58:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"f71cf1c7-3018-42d8-a639-7f9dc08f4fa0","html_url":"https://github.com/RyanColl/NextJs-Bootstrap-Context","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/RyanColl/NextJs-Bootstrap-Context","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FNextJs-Bootstrap-Context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FNextJs-Bootstrap-Context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FNextJs-Bootstrap-Context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FNextJs-Bootstrap-Context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanColl","download_url":"https://codeload.github.com/RyanColl/NextJs-Bootstrap-Context/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanColl%2FNextJs-Bootstrap-Context/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34283445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-13T02:00:06.617Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-01-08T10:17:25.101Z","updated_at":"2026-06-13T12:06:07.655Z","avatar_url":"https://github.com/RyanColl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextJS | Bootstrap | Context \n\nThis example shows how to use react context api in our app.\n\nThink of the context like a very simple store, in this example, it takes in children and displays them in between the provider. By wrapping the app in the Context, everything inside of the app has access to the context like a store.\n\nWe start off by creating the Provider in `context/AppContext.js`\n```js\nexport const AppProvider = createContext()\n```\n\nThen we create the component that sits around our app. Notice it takes in children and places them between the provider.\n```js\nfunction AppContext({children}) {\n    const initialState = {\n        data: []\n    }\n    const [state, dispatch] = useState(initialState)\n    return (\n        \u003cAppProvider.Provider value={{state, dispatch}}\u003e\n            {children}\n        \u003c/AppProvider.Provider\u003e\n    )\n}\n```\n\nFinally, to use the store inside of a component, import the provider into the page you wish to use the store.\n```js\nimport { AppProvider } from '../context/AppContext'\n```\n\nThen place the provider into React's useContext. We access state and dispatch, the two variables declared in the provider that wraps the app.\n```js\nconst {state, dispatch} = React.useContext(AppProvider)\n```\n\nWe see state contains `data: []`, and dispatch is how we update it.\n```js\nconst {data} = state; // declare data into a variable\nconst changeData = (data) =\u003e dispatch({...state, data}) // change state\n```\n\nFinally we can update the data with a button.\n```js\n\u003cbutton onClick={() =\u003e {changeData(['new data'])}}\u003eClick\u003c/button\u003e\n```\n\nAnd display it by mapping the data array, and displaying h1 tag.\n```js\n{data.map((string, i) =\u003e {\n    return \u003ch1\u003e{string}\u003c/h1\u003e\n})}\n```\n\n\n## Preview\n\nPreview the example live on [StackBlitz](http://stackblitz.com/):\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-context-api)\n\n## Deploy your own\n\nDeploy the example using [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example):\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-context-api\u0026project-name=with-context-api\u0026repository-name=with-context-api)\n\n## How to use\n\nExecute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:\n\n```bash\nnpx create-next-app --example with-context-api with-context-api-app\n# or\nyarn create next-app --example with-context-api with-context-api-app\n```\n\nDeploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryancoll%2Fnextjs-bootstrap-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryancoll%2Fnextjs-bootstrap-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryancoll%2Fnextjs-bootstrap-context/lists"}