{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}我..

说明

这个 SocialEmbed 组件将丰富的社交媒体嵌入一些支持的提供者或包含与源内容链接的倒置.

支助提供者

安装

npm install @bbc/psammead-social-embed --save

道具

光学

fallback

skipLink

caption

见 无障碍说明 更多信息.

注:为方便起见 %provider% 财务报告和审定财务报表 %provider_name% 内 fallback, (中文(简体) ), skipLink 财务报告和审定财务报表 caption 字符串将被替换为当前提供者,并在已知提供者的地方,替换提供者的名称. (原始内容存档于2018-09-21). E.G. youtube 财务报告和审定财务报表 YouTube 页:1.

使用量

光学

传出 a 支持提供者 和有效的 ombed 反应。 如果这两种情况都无法解决,则会提供包含与源内容链接的倒置.

示例

import { CanonicalSocialEmbed } from '@bbc/psammead-social-embed';

<CanonicalSocialEmbed
  provider="instagram"
  service="news"
  oEmbed={{ html: '...' }}
  skipLink={{
    text: 'Skip %provider_name% content',
    endTextId: 'skip-%provider%-content',
    endTextVisuallyHidden: 'End of %provider_name% content',
  }}
  fallback={{
    text: "Sorry but we're having trouble displaying this content",
    linkText: 'View content on %provider_name%',
    linkTextSuffixVisuallyHidden: ', external',
    linkHref: 'https://www.instagram.com/p/B8FPf4ZphHi/',
    warningText: 'Warning: BBC is not responsible for third party content',
  }}
/>;

本构成部分支持与难民署的整合 反应-负载 软件包,确保社交媒体的帖子在被看到时能够发布.

示例

<LazyLoad height={200}>
  <CanonicalSocialEmbed provider="instagram" .../>
</LazyLoad>

打开

此组件需要 onRender 当嵌入面完全渲染(目前仅用于twitter嵌入面)时.

示例

import React, { useState } from 'react';
import styled from '@emotion/styled';

const DEFAULT_MIN_HEIGHT = '18.75rem';

const Wrapper = styled.div`
  min-height: ${({ minHeight }) => minHeight};
`;

const SocialEmbedWithWrapper = ({
  provider,
  oEmbed,
  skipLink,
  fallback,
  service,
  }) => {

  const [wrapperMinHeight, setWrapperMinHeight] = useState(DEFAULT_MIN_HEIGHT);

  return (
    <Wrapper minHeight={wrapperMinHeight}>
      <CanonicalSocialEmbed
        provider={provider}
        oEmbed={oEmbed}
        skipLink={skipLink}
        fallback={fallback}
        service={service}
        onRender={() => {
          setMinHeight('0');
        }}
      />
    </Wrapper>
  );
};

export default SocialEmbedWithWrapper;

AMP 计划

传出 a 支持提供者。如果无法满足这种情况,则会提供包含与源内容链接的倒置.

通过一个有效的文件 id。这是指URL中唯一识别源内容的部分。 (原始内容存档于2018-09-21). E.G. 1237210910835392512 内 https://twitter.com/MileyCyrus/status/1237210910835392512。 。 。 .

import { AmpSocialEmbed } from '@bbc/psammead-social-embed';

<AmpSocialEmbed
  provider="instagram"
  service="news"
  id="B8FPf4ZphHi"
  skipLink={{
    text: 'Skip %provider_name% content',
    endTextId: 'skip-%provider%-content',
    endTextVisuallyHidden: 'End of %provider_name% content',
  }}
  fallback={{
    text: "Sorry but we're having trouble displaying this content",
    linkText: 'View content on %provider_name%',
    linkTextSuffixVisuallyHidden: ', external',
    linkHref: 'https://www.instagram.com/p/B8FPf4ZphHi/',
    warningText: 'Warning: BBC is not responsible for third party content',
  }}
/>;

何时使用此组件

本部分旨在从一些媒体中嵌入丰富的社交媒体内容 支助提供者 主要内容,例如文章.

不使用此组件时

该部分不会为外部供应商提供丰富的社交媒体 支助提供者 – 这些会使用倒置的内容取而代之.

无障碍说明

本构成部分提供: 跳过链接,允许用户识别并跳过您页面中的社交媒体内容. skipLink.endTextId 应设定为唯一识别的值 skipLink.endTextVisuallyHidden。当一个页面上有一个以上来自同一供应商的社交媒体时,这一点尤其重要.

fallback.linkTextSuffixVisuallyHidden 用于添加后缀到 fallback.text这在UI上是看不到的,但会被辅助技术所捕获.

caption.textPrefixVisuallyHidden 用于在 caption.text这在UI上是看不到的,但会被辅助技术所捕获.

杂项

内部的一些组成部分 SocialEmbed 得到同样的道具 并使用 反应. memo 防止不必要的.

捐款

Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .

行为守则

我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.

许可证

萨姆米德 Apache 2.0 许可。 。 。 .