Skip to content

Instantly share code, notes, and snippets.

@nimahkh

nimahkh/App.css

Last active July 10, 2020 03:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nimahkh/9c008aaf2fd2d1cc83cd98c61e54979a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nimahkh/9c008aaf2fd2d1cc83cd98c61e54979a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nimahkh revised this gist Dec 25, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions state.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ import React, {createContext, useContext, useReducer} from 'react';
    export const StateContext = createContext();

    export const StateProvider = ({reducer, initialState, children}) => {
    const [state, dispatch
    const [state, dispatch]= useReducer();
    return(
    <StateContext.Provider value={}>
    {children}
    @@ -12,4 +12,4 @@ export const StateProvider = ({reducer, initialState, children}) => {
    };

    export const useStateValue = () => useContext(StateContext);
    export const useStateDisptach = () => useContext(StateDispatchContext);
    export const useStateDisptach = () => useContext(StateDispatchContext);
  2. nimahkh revised this gist Dec 25, 2019. 1 changed file with 10 additions and 6 deletions.
    16 changes: 10 additions & 6 deletions state.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,10 +2,14 @@ import React, {createContext, useContext, useReducer} from 'react';

    export const StateContext = createContext();

    export const StateProvider = ({reducer, initialState, children}) =>(
    <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
    </StateContext.Provider>
    );
    export const StateProvider = ({reducer, initialState, children}) => {
    const [state, dispatch
    return(
    <StateContext.Provider value={}>
    {children}
    </StateContext.Provider>
    )
    };

    export const useStateValue = () => useContext(StateContext);
    export const useStateValue = () => useContext(StateContext);
    export const useStateDisptach = () => useContext(StateDispatchContext);
  3. nimahkh revised this gist Mar 12, 2019. 3 changed files with 97 additions and 0 deletions.
    46 changes: 46 additions & 0 deletions App.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    .App {
    text-align: center;
    }

    .App-logo {
    animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
    pointer-events: none;
    }

    .App-header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
    }

    .App-link {
    color: #61dafb;
    }

    @keyframes App-logo-spin {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
    }

    .fullWidth{
    width:100%;
    height:500px
    }

    .blue{
    background-color: #61dafb;
    }

    .green{
    background-color: darkgreen;
    }
    20 changes: 20 additions & 0 deletions Button.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    import {useStateValue} from './state';
    import React from "react";

    export const Button = () => {
    const [{theme}, dispatch] = useStateValue();

    return (
    <div className={[theme.primary,'fullWidth'].join(" ")}>
    <button
    className={theme.primary}
    onClick={() => dispatch({
    type: 'changeTheme',
    newTheme: {primary: theme.primary==="blue"?'green':'blue'}
    })}
    >
    Make me blue!
    </button>
    </div>
    );
    }
    31 changes: 31 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    import React from "react";
    import {StateProvider} from "./state"
    import './App.css';
    import {Button} from "./Button";

    const App = () => {
    const initialState = {
    theme: {primary: 'green'}
    };

    const reducer = (state, action) => {
    switch (action.type) {
    case 'changeTheme':
    return {
    ...state,
    theme: action.newTheme
    };

    default:
    return state;
    }
    };

    return (
    <StateProvider initialState={initialState} reducer={reducer}>
    <Button/>
    </StateProvider>
    );
    }

    export default App;
  4. nimahkh created this gist Mar 12, 2019.
    11 changes: 11 additions & 0 deletions state.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    import React, {createContext, useContext, useReducer} from 'react';

    export const StateContext = createContext();

    export const StateProvider = ({reducer, initialState, children}) =>(
    <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
    </StateContext.Provider>
    );

    export const useStateValue = () => useContext(StateContext);