Forem: Richard Lindhout

Super small and simple type safe translation library for React

Richard Lindhout — Mon, 06 Jul 2020 20:20:00 +0000

react-ridge-translations 🇫🇷 🇺🇸 🇬🇧 🇪🇸 🇩🇪 🇬🇧 🇨🇳 🇷🇺 🇮🇹

Simple 💪 fast ⚡️ and small 🎈 (400 bytes) translation library for React / React Native

Impressions

Github Repository

https://github.com/web-ridge/react-ridge-translations

Install

yarn add react-ridge-translations

npm install react-ridge-translations --save

Why another translation library 🤔

We were frustrated with the API of other libraries and wanted a more type safe alternative for template tags

Features 🤹‍♀️

React / React Native
Simple
Fast
Very tiny (400 bytes)
100% Typesafe
Hooks
Use outside React components

Getting started 👏 👌

// translate.ts
import { createTranslations } from 'react-ridge-translations'

// first describe which languages are allowed/required (Typescript)
type TranslationLanguages = {
  nl: string
  fr: string
  be: string
}

// create a translation object with your translations
const translate = createTranslations<TranslationLanguages>()({
  homeScreen:{
    signIn: {
      nl: 'yes',
      fr: 'yes',
      be: 'yes',
    },
    welcomeText: ({ firstName }: { firstName: string }) => ({
      nl: `Hoi ${firstName}`,
      fr: `Hello ${firstName}`,
      be: `Hello ${firstName}`,
    }),
  }
}, {
    language: 'nl',
    fallback: 'en',
})
export default translate

Usage in React / React Native components

import translate from './translate'
export default function HomeScreen() {   
    // use is a hook which will update automatically if language change :)
    const ht = translate.use().homeScreen
    return (
        <div>
            {ht.welcomeText({ firstName: 'Richard' })}
            {ht.signIn}
        </div>
    )
}

Usage outside components / Class components

import translate from './translate'
translate.translations.homeScreen.loginButton

Changing language

import translate from './translate'
translate.setOptions({
    language: 'nl',
    fallback: 'en',
})

Detect user language

React Native

import { NativeModules, Platform } from 'react-native';
import { createTranslations } from 'react-ridge-translations'
// first describe which languages are allowed/required (Typescript)
type TranslationLanguages = {
    nl: string
    fr: string
    en: string
}

const deviceLanguage = (Platform.OS === 'ios'
                                   ? NativeModules.SettingsManager.settings.AppleLocale ||
                                     NativeModules.SettingsManager.settings.AppleLanguages[0] // iOS 13
                                   : NativeModules.I18nManager.localeIdentifier) || '';;
const availableLanguages: (keyof TranslationLanguages)[] = ['nl', 'en', 'fr'] ;
const fallback = 'en'

function getBestLanguage(): typeof availableLanguages[number] | typeof fallback {
    return availableLanguages.find(al => deviceLanguage.startsWith(al)) || fallback
}

const translate = createTranslations<TranslationLanguages>()({
    // ........translations
}, {
    language: getBestLanguage(), 
    fallback,
})
export default translate

React

import { createTranslations } from 'react-ridge-translations'
// first describe which languages are allowed/required (Typescript)
type TranslationLanguages = {
    nl: string
    fr: string
    en: string
}

const deviceLanguage = navigator.language;
const availableLanguages: (keyof TranslationLanguages)[] = ['nl', 'en', 'fr'] ;
const fallback = 'en'

function getBestLanguage(): typeof availableLanguages[number] | typeof fallback {
    return availableLanguages.find(al => deviceLanguage.startsWith(al)) || fallback
}
const translate = createTranslations<TranslationLanguages>()({
    // ........translations
}, {
    language: getBestLanguage(), 
    fallback,
})
export default translate

Checkout our other products too! 👌 https://github.com/web-ridge

Easy global state management in React / React Native -> https://github.com/web-ridge/react-ridge-state

Feedback

If you have feedback / questions / issues feel free to make an issue or a comment!

https://github.com/web-ridge/react-ridge-translations

Easy global state in React which can be used outside React components too

Richard Lindhout — Fri, 19 Jun 2020 14:12:55 +0000

Github: https://github.com/web-ridge/react-ridge-state

react-ridge-state 🏋️‍♀️ ⚡️ 🏋️‍♂️

Simple 💪 fast ⚡️ and small 🎈 (500 bytes) global state management for React which can be used outside of a React component too!

yarn add react-ridge-state

npm install react-ridge-state --save

Why another state library 🤔

We were frustrated that the current solutions could often only be used from React or have too complicated APIs. We wanted a lightweight solution with a smart API that can also be used outside React components.

Features 🤹‍♀️

React / React Native
Simple
Fast
Very tiny (500 bytes)
100% Typesafe
Hooks
Use outside React components

Roadmap 🏃‍♀️ 🏃‍♂️

Custom selectors for deep state selecting

Getting started 👏 👌

Create a new state

import { newRidgeState } from "react-ridge-state";
interface CartProduct {
  id: number;
  name: string;
}
export const cartProductsState = newRidgeState<CartProduct[]>([
  { id: 1, name: "Product" },
]);

Use state inside components

import { cartProductsState } from "../cartProductsStatee";

const [cartProducts, setCartProducts] = cartProductsState.use();

Use state outside of React

import { cartProductsState } from "../cartProductsStatee";
cartProductsState.get();

Set state outside of React

import { cartProductsState } from "../cartProductsStatee";

// simple and direct
cartProductsState.set([{ id: 1, name: "NiceProduct" }]);

// if you want previous state as callback
cartProductsState.set((prevState) => [
  ...prevState,
  { id: 1, name: "NiceProduct" },
]);

// you can also use a callback so you know when state has rendered
cartProductsState.set(
  (prevState) => [...prevState, { id: 1, name: "NiceProduct" }],
  (newState) => {
    console.log("New state is rendered everywhere");
  }
);

Counter example

import { newRidgeState } from "react-ridge-state";

// this can be used everywhere in your application
export const globalCounterState = newRidgeState<number>(0);

function CounterComponent() {
  const [count, setCount] = globalCounterState.use();
  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => setCount(c + 1)}>Add 1</button>
    </div>
  );
}

// you can use these everywhere in your application the globalCounterState will update automatically
// even if set globally
function CounterViewer() {
  const count = globalCounterState.useValue();

  return (
    <div>
      <div>Count: {count}</div>
    </div>
  );
}

Persistence example

It's possible to add persistency to your state. (add try/catch if you use localStorage in real app)

const authStorageKey = "auth";
const authState = newRidgeState<AuthState>(
  getInitialState() || emptyAuthState,
  { onSet }
);

// getInitialState fetches data from localStorage
function getInitialState() {
  let initialState = undefined;
  const item = localStorage.getItem(authStorageKey);
  if (item) {
    initialState = JSON.parse(item);
  }
}

// onSet is called after state has been set
function onSet() {
  // save to local storage
  localStorage.setItem(authStorageKey, JSON.stringify(newState));
}

About us

We want developers to be able to build software faster using modern tools like GraphQL, Golang, React Native without depending on commercial providers like Firebase or AWS Amplify.

Checkout our other products too! 👌 https://github.com/web-ridge

One command to start your React Native Web project with Fast Refresh 👏 👌

Richard Lindhout — Wed, 03 Jun 2020 21:09:00 +0000

Share more than 90% of your code across iOS, Android and the web 👏 👌!

If you want to run React Native on the web here is a simple starting point which you can use. We use React Native Web in a few production apps and it's also used in the new Twitter web-application so check it out.

You only need to run this (it will run the latest cli tools of react-scripts and react-native cli)

npx create-react-native-web-application --name=myapp

https://github.com/web-ridge/create-react-native-web-application

Forem: Richard Lindhout

Super small and simple type safe translation library for React

react-ridge-translations 🇫🇷 🇺🇸 🇬🇧 🇪🇸 🇩🇪 🇬🇧 🇨🇳 🇷🇺 🇮🇹

Impressions

Github Repository

Install

Why another translation library 🤔

Features 🤹‍♀️

Getting started 👏 👌

Usage in React / React Native components

Usage outside components / Class components

Changing language

Detect user language

React Native

React

Related

Feedback

Easy global state in React which can be used outside React components too

react-ridge-state 🏋️‍♀️ ⚡️ 🏋️‍♂️

Why another state library 🤔

Features 🤹‍♀️

Roadmap 🏃‍♀️ 🏃‍♂️

Getting started 👏 👌

Create a new state

Use state inside components

Use state outside of React

Set state outside of React

Counter example

Persistence example

About us

One command to start your React Native Web project with Fast Refresh 👏 👌