What are we learning ?
- How to Create a Context.
- Import and use our Hook.
A bit of context
What's an hook ?
Hooks are functions that let you add into the React State and lifecycle.
What's a context ?
Context provides a way to pass data through the component without having to pass props.
Create our Context.
We create our context with the createContext function. We pass an Empty Object {} (we don't want to define any default value). Then add an empty Interface (We will use it later to enforce our typing).
Then we create a Function Provider to wrap our application with.
Function Component => Type our function to be a React Component.
Props With Children => Type our application to contain a children props.
Children => Is the react component that will get rendered in our component. In this case our Application.
value={{}} => There we will pass the function/data we want to share to the other components. (The type of value is our TranslationContextActions interface).
Create our translation files
We are gonna create a folder named Translation with 2 different files within. French and English.
Once those files created we create another file name language.interface.ts . This file will ensure that both files contain the same Data.
Then we populate our French.ts file with
And our English.ts file with
Now that our data is type safe, and created we can begin the importation.
Import the right Language
To do so, we start by setting a type of the supported Language by our application.
Then we create a function that get the navigator language of our user. Then, with an if statement, we return the correct value. Without forgetting the default one, English in our case.
Our function name is self explained and everything got a correct type so we can move on to the importation.
Nothing special on this function, we import our file based on the given variable. The name also makes sense, and we gave a type to the Function and our Variable. Now let's import this file when the component renders.
We check if our translationData is undefined cause we don't want to import it twice. Then we call our fonctions and use setTranslationData on the imported file.
Why making so much different function ?
I'm a strong believer that a function should serve one action. If it does more then one thing, slice it.
But why ?
Small well named function are self explanatory which make them easy to understand, to maintain and are way more readable.
Creating a hook
First we need to type our ContextActions. So let's add an action named translationData with the same type of our useState.
Then we add the value translationData of our useState to value. We can now access translationData through our application.
Our hook
We make sure that our hook is placed in a TranslationProvider and we return our translationData
Using our Translation Hook
Let's place the Application between our TranslationProvider.
And boom ! We can then use our hook !
Here's a link to the Github Repo : https://github.com/SeyBoo/translation-hook
Top comments (0)