@beletsky/react-native-yandex-remote-config NPM

Yandex Remote Config for React Native

🚨 ВНИМАНИЕ! Версия 1.x.x. и выше работает только с новой архитектурой React Native TurboModules.

Если вы не готовы переходить на новую архитектуру, то просим оставаться на версии ниже 1.x.x (API не изменился)

Библиотека, предназначенная для использования Feature Toggles (переключателей функций) в приложениях React Native. Библиотека предоставляет простой интерфейс для управления удалёнными конфигурациями и переключателями функций, позволяя динамически контролировать функции в вашем приложении.

Установка

npm install @beletsky/react-native-yandex-remote-config

или

yarn add @beletsky/react-native-yandex-remote-config

Для IOS

Перед использованием библиотеки на IOS устройствах, необходимо выполнить установку pod

pod install

API

`withRemoteConfig({ flag, flagType, condition, defaultValue, defaultCondition }, WrappedComponent)`

Компонент высшего порядка (HOC), который оборачивает переданный компонент и отображает его только в том случае, если условие, основанное на значении удалённого флага, выполняется. Этот HOC полезен, когда нужно контролировать видимость компонента на основе удалённых флагов конфигурации.

Параметры:

flag: Имя флага, который будет проверяться в удалённой конфигурации.
flagType: Тип флага, который ожидается (например, FlagType.bool).
condition: Условие, по которому определяется, будет ли компонент отображён. По умолчанию, проверяет значение на true.
defaultValue: Значение по умолчанию для флага, если его нет в конфигурации.
defaultCondition: Условие по умолчанию для отображения компонента до загрузки значения флага (по умолчанию false).
WrappedComponent: Компонент, который будет обёрнут и отображён в случае выполнения условия.

Возвращает:

Компонент, который будет отображаться только при выполнении условия.

Пример:

import React from 'react';
import { Text } from 'react-native';
import { withRemoteConfig, FlagType } from '@beletsky/react-native-yandex-remote-config';

const MyComponent = ({ updateFlag }) => {
  return <Text>Функция активирована!</Text>;
};

const MyComponentWithToggle = withRemoteConfig(
  {
    flag: 'feature_enabled',
    flagType: FlagType.bool,
    condition: (value) => value === true,
    defaultCondition: false,
  },
  MyComponent
);

export default MyComponentWithToggle;

В этом примере MyComponentWithToggle будет отображаться только в том случае, если флаг feature_enabled возвращает значение true из удалённой конфигурации. Функция updateFlag() будет передана в обёрнутый компонент, что позволяет принудительно обновить значение флага при необходимости.

`wrapRemoteConfig({ flag, flagType, condition, callback, defaultValue })`

Функция-обёртка, которая позволяет обернуть любую функцию в логику Feature Toggle. Эта функция вызовет переданный колбэк только в том случае, если заданное условие (condition) выполнено. Это полезно для выполнения определённых действий, если определённая функция включена в конфигурации.

Параметры:

flag: Имя флага, который будет проверяться в удалённой конфигурации.
flagType: Тип флага, который ожидается (например, FlagType.bool).
condition: Условие, по которому будет определяться, нужно ли выполнять функцию. По умолчанию, проверяет значение на true.
callback: Функция, которая будет вызвана, если условие выполнено. Функция должна принимать значение флага и возвращать другую функцию, которая будет вызвана с переданными аргументами.
defaultValue: Значение по умолчанию для флага, если его нет в конфигурации.

Возвращает:

Функция, которая возвращает промис, выполняющий переданный callback, если условие выполнено, или ничего не делает, если не выполнено.

Пример:

const execAlert = (flagValue: boolean) => (text: string) => {
    Alert.alert('Feature Toggle alert', `${text}: ${flagValue}`);
    return '';
};

const scheduledAlert = wrapRemoteConfig({
    flag: 'test-bool',
    flagType: FlagType.bool,
    callback: execAlert,
    condition: (value) => {
        return !!value;
    },
});

// Использование:
scheduledAlert('Some text');

Эта функция полезна, когда вы хотите контролировать выполнение кода в зависимости от значений, загруженных из удалённой конфигурации.

`useRemoteConfig(flag, flagType, defaultValue)`

Пользовательский хук, который используется для получения значения флага из удалённой конфигурации. Он позволяет вам загружать и отслеживать значения флагов в вашем приложении и предоставляет возможность принудительно обновить значение флага.

Параметры:

flag: Имя флага, который нужно загрузить.
flagType: Тип флага, который ожидается (например, FlagType.bool).
defaultValue: Значение по умолчанию, если флаг не найден или его значение не задано.

Возвращает:

[state, fetchFlag, isLoading]: Массив, содержащий три элемента:
- state: Текущее значение флага или значение по умолчанию, если флаг не найден.
- fetchFlag: Функция, которая позволяет вручную перезагрузить значение флага из удалённой конфигурации.
- isLoading: Булевое значение, указывающее, загружается ли в данный момент значение флага.

Пример:

const [featureEnabled, reloadFeature, isLoading] = useRemoteConfig('new_feature', FlagType.bool, false);

if (isLoading) {
  // Отображаем индикатор загрузки
}

if (featureEnabled) {
  // Выполняем действие, если функция включена
}

// Для принудительного обновления значения флага:
reloadFeature();

Этот хук полезен для динамической загрузки и использования значений флагов конфигурации в компонентах вашего приложения, а также для отслеживания состояния загрузки этих значений.

Типы

`Settings`

Тип Settings представляет настройки для конфигурации удалённого клиента. Он включает в себя различные параметры, такие как базовый URL, сетевые настройки и очереди.

Структура:

type Settings = {
  baseURL?: string;
  settings?: any;
  network?: any;
  fetchThrottle?: number;
  clientFeatures?: Record<string, string>;
  varioqubQueue?: any;
  outputQueue?: any;
};

Параметры:

baseURL: Базовый URL для запросов.
settings: Дополнительные настройки клиента.
network: Настройки сети.
fetchThrottle: Интервал времени (в миллисекундах) между запросами к удалённой конфигурации.
clientFeatures: Объект, представляющий функции клиента в формате ключ-значение.
varioqubQueue: Очередь для обработки задач.
outputQueue: Очередь для вывода данных.

`FlagType`

Enum FlagType представляет возможные типы флагов, которые могут быть использованы в удалённой конфигурации.

Структура:

enum FlagType {
  string = 'string',
  int = 'int',
  double = 'double',
  bool = 'bool',
}

Значения:

baseURL: Базовый URL для запросов.
string: Строковый тип флага.
int: Целочисленный тип флага.
double: Числовой тип флага с плавающей точкой.
bool: Логический тип флага.

`ValueType<T extends FlagType>`

Тип ValueType используется для определения возможного значения флага в зависимости от его типа. Это условный тип, который определяет, какое значение может принимать флаг в зависимости от его типа FlagType.

Структура:

type ValueType<T extends FlagType> = T extends FlagType.string
  ? string
  : T extends FlagType.bool
    ? boolean
    : number;

Описание:

Если тип флага string, то значение будет строкой.
Если тип флага bool, то значение будет логическим (boolean).
В остальных случаях значение будет числовым (number).

`FCFT<P>`

Интерфейс FCFT описывает функциональный компонент с дополнительным свойством updateFlag(), который передаётся обёрнутому компоненту с использованием withRemoteConfig().

Структура:

interface FCFT<P> {
  (
    props: PropsWithChildren<
      P & {
      updateFlag: () => void;
    }
    >,
    context?: any
  ): ReactElement<any, any> | null;

  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

Описание:

props: Свойства компонента, которые включают в себя все свойства, передаваемые в компонент, а также функцию updateFlag.
context: Опциональный контекст для компонента.
propTypes: Опциональные типы проверок свойств компонента.
contextTypes: Опциональные типы проверок контекста.
defaultProps: Опциональные свойства по умолчанию для компонента.
displayName: Опциональное отображаемое имя компонента.

Этот интерфейс полезен для определения компонентов, которые будут использоваться с HOC withRemoteConfig() и которым потребуется функция обновления значения флага.

react-native ios android remote yandex appmetrica remote-config yandex-remote-config react-native-remote-config appmetrica-remote-config

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago