https://github.com/mbrsagor/contextapi
React content API and hooks
https://github.com/mbrsagor/contextapi
context-api hooks-api hooks-api-react react-context-api react-hooks
Last synced: 4 months ago
JSON representation
React content API and hooks
- Host: GitHub
- URL: https://github.com/mbrsagor/contextapi
- Owner: mbrsagor
- Created: 2020-07-25T05:05:08.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-06T06:53:30.000Z (over 3 years ago)
- Last Synced: 2025-01-12T13:25:28.266Z (6 months ago)
- Topics: context-api, hooks-api, hooks-api-react, react-context-api, react-hooks
- Language: JavaScript
- Homepage:
- Size: 452 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ContextAPI counter app
> The project is basically ContextAPI counter app.
###### How to run the project on your localhost or local development server? Please bellow the command:
```
cd ContextAPI
yarn install
yarn start
```
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
##### Example:
Step: 1 Create a a new file `context.js`
```javascript
import React, { useState, createContext } from 'react';
// Create context Object
export const CounterContext = createContext()
export const CounterContextProvider = props => {
const [count, setCount] = useState(0);
return (
{props.children}
)
}
```
Step: 2 Create a a new file `counter-display.jsx`
```javascript
import React, { useContext } from 'react';
import { CounterContext } from '../../context/counter_context';
const CounterDispaly = () => {
const [count] = useContext(CounterContext)
return (
Count: {count}
);
}
export default CounterDispaly;
```
Step: 3 Create a a new file `counter-button.jsx`:
```javascript
import React, { useContext } from 'react';
import { CounterContext } from '../../context/counter_context';
const CounterButton = () => {
const [count, setCount] = useContext(CounterContext);
const increment = () => {
setCount(count + 1)
}
const decrement = () => {
setCount(count - 1)
}
const reset = () => {
setCount(0)
}
return (
Increment
Decrement
Reset
)
}
export default CounterButton;
```
Step: 4 Create a a new file `show-counter.jsx`:
```javascript
import React from 'react';
import CounterDisplay from '../components/counter/counter-display';
import CounterButton from '../components/counter/counter-button';
import { CounterContextProvider } from '../context/counter_context';
export default function ShowCounter() {
return (
Context API Counter
)
}
```
Step: 5 Create a a new file `app.jsx`:
```javascript
import React, { Component } from "react";
import ShowCounter from './views/showCounter'
class App extends Component {
render() {
return (
);
}
}
export default App;
```