Skip to content

Instantly share code, notes, and snippets.

@ryanwilsonperkin

ryanwilsonperkin/App.tsx

Created November 8, 2019 16:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryanwilsonperkin/8bd74ef5fc0078e9aa85a9db2e9d3ac2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryanwilsonperkin/8bd74ef5fc0078e9aa85a9db2e9d3ac2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ryanwilsonperkin renamed this gist Nov 8, 2019. 1 changed file with 0 additions and 0 deletions.
    0 ThemeProvider.tsx → Theme.tsx
    View file
    File renamed without changes.
  2. ryanwilsonperkin created this gist Nov 8, 2019.
    13 changes: 13 additions & 0 deletions App.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    import React from "react";
    import { ThemeProvider } from "./Theme";
    import ToggleTheme from "./ToggleTheme";
    import ThemedText from "./ThemedText";

    const App: React.FC = () => (
    <ThemeProvider>
    <ToggleTheme />
    <ThemedText>Hello World</ThemedText>
    </ThemeProvider>
    )

    export default App;
    26 changes: 26 additions & 0 deletions ThemeProvider.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    import React from "react";

    type Theme = "light" | "dark";

    interface IThemeContext {
    theme: Theme;
    setTheme: (theme: Theme) => void;
    }

    // Here we create the ThemeContext which our components will reference
    // We provide the default values that will be used if there's no <ThemeProvider> in the tree
    export const ThemeContext = React.createContext<IThemeContext>({
    // By default, we'll use the light theme
    theme: "light",
    // If the <ThemeProvider> isn't in the tree, then calling setTheme will be a no-op
    setTheme: () => {}
    });

    export const ThemeProvider: React.FC = ({ children }) => {
    const [theme, setTheme] = React.useState<Theme>("light");
    return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
    {children}
    </ThemeContext.Provider>
    );
    };
    10 changes: 10 additions & 0 deletions ThemedText.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    import React from "react";
    import { ThemeContext } from "./Theme";

    const ThemedText: React.FC = ({ children }) => {
    const { theme } = React.useContext(ThemeContext);
    const textColor = theme === "light" ? "black" : "white";
    return <p style={{color: textColor}}>{children}</p>
    };

    export default ThemedText;
    13 changes: 13 additions & 0 deletions ToggleTheme.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    import React from "react";
    import { ThemeContext } from "./Theme";

    const ToggleTheme: React.FC = () => {
    const { theme, setTheme } = React.useContext(ThemeContext);
    const toggle = () => {
    if (theme === "light") setTheme("dark");
    else if (theme === "dark") setTheme("light");
    };
    return <button onClick={toggle}>Change themes</button>;
    };

    export default ToggleTheme;