React-multi-lang HOC

Hello everyone, there are a really high number of react multi language components out there. But i had the necessity to create a new one that is simpler to use, integrate and upgrade.

Why?

I haven’t found anything that integrates well with json translation files, and that would let me update the translations at will.

react-multi-lang uses the same logic behind redux, it triggers the render of the registered components in order to update them every time there are language changes.

Available functionalities

react-multi-lang exports several functionalities that simplify the usage of the higher order component.

  • setDefaultTranslations(translations) – Sets the translations and doesn’t trigger the renders of the registered components
  • setTranslations(translations) – Same as setDefaultTranslations, but this will trigger the render of all components using translations
  • setDefaultLanguage(key) – Sets the default application language
  • setLanguage(key) – Same as setDefaultLanguage, but this will trigger the render of all components using translations
  • getLanguage() – Returns the current selected language
  • t(key, params) – Returns the translated string with the passed parameters

Usage

import {setDefaultTranslations, setTranslations, setDefaultLanguage, setLanguage, getLanguage, t } from 'react-multi-lang'

Higher Order Component

translate(component) – Simple Higher Order Component that gets a component and returns a new wrapper component with multi language support

Usage

import { translate } from 'react-multi-lang'
import SomeComponent from 'SomeComponent'
export default translate(SomeComponent)

For a more detailed information check out the project on gitHub

Advertisements

recost – React Context State

A lot have changed since my latest post 4 years ago, frameworks like ReactJS, Angular and VueJS rised to be known by everyone, and along with it, libraries like Redux and RxJS have shown not to be only good but also required in almost every projects. Almost every week there is something new that we have to know.

But what made me write this post was the new React Context API that just appeared in React v16.3.

Some say that this new API has almost killed Redux in ReactJS applications, and the future will say if that’s true 🙂

Because of this i’ve created a new library to work with this new API but i’ve given it a little taste of the Redux style we are used to.

The idea behind recost is to give the possibility to the developer to handle the state changes just like we did it on Redux, by dispatching actions and handle the changes on reducers.

Also, it gives the possibility by exporting the dispatch function out of the Provider scope to inject data into the context of the Provider. This is useful if you have a component that is self contained in it’s own provider, and you want to give the possibility for an outer component to insert data into it’s context, like a list of notifications for example.

You can check the entire source code on Github along with an example and a full explanation of the library.

Hope you like it, and if you have any request or suggestion just leave a comment down bellow or open an issue on Github 🙂

Email Verification JavaScript

Just a little code snippet to verify an email in JavaScript.

The function:

<script type="text/javascript">
    var result = emailVerification("insert email here");
    function emailVerification(email){
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!filter.test(email.value)) {
            return false;
        } else {
            return true;
        }
    }
</script>

Read More »