@dating-feed/sdk-react

Feed REACT SDK

Integration

Install via npm:

npm i -D @dating-feed/sdk-react

Install via yarn:

yarn add @dating-feed/sdk-react

import { Feed } from '@dating-feed/sdk-react';

function App() {

    const props = {
        /** Параметры для инициализации */
    }

    const initCb = ({ checkUserPosts }) => {
        /**
            Функция проверки постов пользователя.
            checkUserPosts(params, cb);

            Значение по умолчанию возьмется из параметров инициализации
            params = {
                userID
            };

            Функция обратного вызова, res (boolean) принимает значение true или false в зависимости от наличия постов пользователя
            cb(res) => {}
        */
    };

    const renderCb = ({ update }) => {
        /**
            Функция обновления ленты.
            update(params, cb);

            params = {};

            Функция обратного вызова.
            cb() => {}
        */
    };

    return (
        <Feed
          initCb={initCb}
          renderCb={renderCb}
          type={type}
          {...props}
        />
    )
}

Common Parameters

Parameter	Type	Existence	Description
agentID	string	required	ID агента
authToken	string	optional	Токен авторизации
userID	string	optional	ID пользователя
userFeedUrl	function	optional	Функция — конструктор ссылок на страницу / feed пользователя, значение по умолчанию () => ''
purchaseAvailable	function	optional	Функция — проверка доступности подписок и покупок, значение по умолчанию (id: string) => true
userAgentID	string	optional	ID агента конкретного пользователя
realm	string	optional	Настройка типа ленты ('guys', 'default'), значение по умолчанию 'default'
select	number	optional	Кол-во постов на странице, значение по умолчанию 10
comments	boolean	optional	Видимость комментариев к посту, значение по умолчанию false
theme	object	optional	Настройки визуального отображения элементов feed (стилизация)
merchant	string	optional	ID платежной системы

Theme parameters

const layout = {
    feed: { border: `${border}` },
    feedHeaderSubscription: { border: `${border}` },
    bg: { background: `${bgColor}` }, // фон (добавляется к ленте и шапке поста)
    maxWidth: { maxWidth: `${maxWidth}` }, // добавляется к ленте и посту
};
  
  
const icons = {
    like: {
        active: {
            backgroundImage: `url('${likeActiveURL}')`,
        },
        default: {
            backgroundImage: `url('${likeDefaultURL}')`,
        },
    },
    trash: {
        active: {}, // не используется.
        default: {
            backgroundImage: `url('${trashURL}')`,
        },
    },
    lock: {
        active: {}, // не используется.
        default: {
            backgroundImage: `url('${lockURL}')`,
        },
    },
    lockVideo: {
        active: {}, // не используется.
        default: {
            backgroundImage: `url('${lockVideoURL}')`,
        },
    },
    play: {
        active: {}, // не используется.
        default: {
            backgroundImage: `url('${playURL}')`,
        },
    }
};
  
const buttons = {
    default: {
        fontFamily: `${font}`,
    },
    subscribe: { // кнопка подписки в ленте
        color: `${color}`,
        backgroundColor: `${bgColor}`,
        borderColor: `${borderColor}`,
    },
    follow: { // кнопка подписки на странице пользователя
        color: `${color}`,
        backgroundColor: `${bgColor}`,
        borderColor: `${borderColor}`,
    },
    unfollow: { // кнопка отписки на странице пользователя
        color: `${color}`,
        backgroundColor: `${bgColor}`,
        borderColor: `${borderColor}`,
    },
    pay: {
        color: `${color}`,
        backgroundColor: `${bgColor}`,
        borderColor: `${borderColor}`,
    },
    create: {
        color: `${color}`,
        backgroundColor: `${bgColor}`,
        borderColor: `${borderColor}`,
    },
};
  
const text = {
    default: {
        fontFamily: `${font}`,
        color: `${color}`,
    }, // значение по умолчанию, подмешивается к остальным типам текста.
    author: {
        fontFamily: `${font}`,
        color: `${color}`,
    },
    created: {
        fontFamily: `${font}`,
        color: `${color}`,
    },
    annotation: {
        fontFamily: `${font}`,
        color: `${color}`,
    },
    likes: {
        fontFamily: `${font}`,
        color: `${color}`,
    },
    comments: {
        fontFamily: `${font}`,
        color: `${color}`,
    },
    paid: {
        fontFamily: `${font}`,
        color: `${color}`,
    }
}
  
const sign = { // подпись в форме покупки
    purchaseForm: {
        show: false, // убирает блок полностью
        content: '', // можно поменять текст
    }
}
 
 
const theme = {
    layout,
    icons,
    buttons,
    text,
    sign,
};