furl
Getting startedDesignComponents
Design
Design GuidelinesTypography SystemLayout SystemColor palettesCustomization
Components
ComponentsAccordionAlertAnchorAudioAvatarBadgeBreadcrumbsButtonButtonGroupCalendarCardCollapseContextButtonDividerDropdownFooterFormGraphGridHyperlinkIconIframeImageInputItemLayoutListLoaderMediaObjectMenuModalNotificationPaginationPopoverProgressSearchStepsSwitchTableTabsTooltipTypographyVideo

Item

Items present post-like content in a familiar format.

Items are powered by react-timy.

Examples

Joe Henderson6 years ago

I have posted this amazing article here. Check it out!

Sophie GrayJust now

Dude, this is awesome. Thanks so much.

import React from 'react';
import ReactDOM from 'react-dom';
import { Item } from 'furl-components';

ReactDOM.render(
  <Item
      author='Joe Henderson'
      date={new Date('11/03/2019')}
      media='profile-joe.jpg'
      data='I have posted this amazing article here. Check it out!'
    />
    <Item
      author='Sophie Gray'
      date={new Date('12/03/2019')}
      media='profile-sophia.jpg'
      data='Dude, this is awesome. Thanks so much.'
    />, 
  document.getElementById('root')
);

API

Item props
Property Description Type Default
media item media url string
data item content string/object
date item creation date Date
author item author string

Notes

  • You can populate an item either via passing children to it or via the use of the data prop. If data is provided, it will take precedence over passed children, therefore rendering only the content provided in data.
  • data accepts either a string or an object, which allows you to pass it a React component tree.
  • If date is not provided, the component will use the current date and time.

furl was designed and developed by Angelos Chalaris © 2019
Documentation generated using Gatsby, hosting by Netlify