React Context

October 14, 2020

React Context, prop’ları her seviyede manuel olarak geçmek zorunda kalmadan bileşen ağacı üzerinden veri iletmenin bir yolunu sağlar. Yani context ihtiyaç olan verinin uygulama içerisinde global olarak kullanılmasıdır.

Context API

  • createContext() : Uygulamada context nesnesi oluşturmak için kullanılır.
  • Provider : Oluşturduğumuz context in diğer componentler tarafından kullanılmasını sağlarız.
  • contextType : Context e erişmek için kullanırız.
  • Consumer : Context e erişmek için kullanırız.

React Context Ne Zaman Kullanılır ?

Context e, tema veya dil seçimi gibi projemizde state global olarak kullanabileceğimiz yerlerde ihtiyacımız olur.

Context daha iyi anlayabilmek için örnekler üzerinden devam edelim. Bir ThemeContext olsun. İçerisinde light ve dark themeları tanımlayalım. Navbar ve Sidebar diye componentlerimiz olsun. Alt componentlerden bu themeContext ulaşalım.

// ThemeContext.js
import React, { createContext, Component } from 'react'

export const ThemeContext = createContext();

export default class ThemeContextProvider extends Component {

state = {
  isLightTheme: false,
  light: {bg: '#eee', color: '#000'},
  dark: {bg: '#555',  color: '#fff'}
}

toggleTheme = () => {
   this.setState({
    isLightTheme: !this.state.isLightTheme
  })
}

render() {
  return (
    <ThemeContext.Provider value={{...this.state, toggleTheme:                    this.toggleTheme}}>
        {this.props.children}
    </ThemeContext.Provider>
    )
  }
}

ThemeContetx.Provider value props ile state alt propslara aktarmış bulunuyoruz.

 // App.js

import React from 'react'; import Navbar from './components/Navbar'; import Sidebar from './components/Sidebar'; import ThemeToggle from './components/ThemeToggle'; import ThemeContextProvider from './context/ThemeContext';

function App() {
  return (
    <div className="App">
      <ThemeContextProvider>
      <Navbar />
      <Sidebar />
      <ThemeToggle />
      </ThemeContextProvider>
    </div>
  );
}

export default App;

Navbar ve Sidebar componentlerimizi ThemeContextProvider ile sarmalayarak tanımladığız state erişmelerini sağlıyoruz.

Şimdi ise sorunumuz oluşturduğumuz componentlerden context e nasıl erişeceğiz. İlk önce Sidebar componentinde contextType ile erişeceğiz. Daha sonra Navbar componentinde ise Consumer ile erişeceğiz. Böylece iki yöntemide görmüş olacaksınız.

// Sidebar.js
import React, { Component } from 'react'
import {ThemeContext} from '../context/ThemeContext';

export default class Sidebar extends Component {
  static contextType = ThemeContext;
  render() {
  const {isLightTheme, light, dark} = this.context;
  const theme = isLightTheme ? light : dark
  return (
    <div className="sidebar" style={{background: theme.bg}}>
        <span style={{color: theme.color}}>Sidebar</span>
    </div>
    )
  }
}

Gördüğünüz gibi contextType ile ThemeContext teki state erişmek oldukça basit. JS dosyasına ThemeContext import ettikten sonra

static contextType = ThemeContext;

kod satırı ile state erişmiş oluyoruz. Kodun devamı ise eriştiğimiz state theme için kullanmaktır.

// Navbar.js
import React, { Component } from "react";
import { ThemeContext } from "../context/ThemeContext";

export default class Navbar extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {themeContext => {
        const { isLightTheme, light, dark } = themeContext;
        const theme = isLightTheme ? light : dark;
        return (
        <div className="navbar" style={{ background: theme.bg }}>
          <span style={{color: theme.color}}>Navbar</span>
        </div>
      );
     }}
    </ThemeContext.Consumer>
    );
  }
}

Consumer ile de context erişmekte oldukça basit. <ThemeContext.Consumer> ile componentimizi sarmalıyoruz. İçerisine bir fonsiyonda themeContext parametresini gönderiyoruz. Bu parametre içine themeContext teki value değeri doluyor. Bizde yukarıda gördüğünüz şekilde kullanıyoruz.

Context’i Güncelleme

Componentlerimizi ve context oluşturduktan sonra bu context güncelleyerek theme nasıl değiştireceğiz ?

Aslında bu konuyu ben önceden düşündüğüm için ThemeContext.js fonsiyonumu yazmıştım.

toggleTheme = () => {
  this.setState({
    isLightTheme: !this.state.isLightTheme
  })

}

Bu fonsiyonuda value propsu ile alt componentlerime gönderdim. Şimdi ise bu fonksiyonu kullanmak için bir button yapmam gerekiyor.

// ThemeToggle.js
import {ThemeContext} from '../context/ThemeContext';

export default class ThemeToggle extends Component {
  static contextType = ThemeContext;
  render() {
    const {toggleTheme} = this.context;
    return (
      <div className="button-container">
        <button onClick={toggleTheme}>
        Tema Değiştir
        </button>
    </div>

   )
  }
}

Gördüğünüz gibi buttona verdiğim onClick ile context güncellemiş yani theme değiştirmiş oluyorum. Böylece ekranımız dark theme dan light temaya geçmiş oluyor.

Şimdi aşağıda uygulama ile ilgili görsellerimi paylaşıyorum.

dark

light

Gördüğünğüz gibi dark theme dan light theme react context yapısını kullanarak geçmiş bulunuyoruz.

Elimden geldiğince sizlere React Context API anlatmaya çalıştım. Umarım yazı ve örnek projemiz sizlere faydalı olmuştur. Projenin source koduna buradan ulaşabilirsiniz.

Tekrardan görüşmek üzere…

Share: