@dating-feed/sdk-react
v0.2.2
Published
## Integration
Downloads
24
Readme
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,
};