React-ui-flex-cards NPM

react-flex-ui-cards

Humble and quick custom variations on react-ui-cards by @nukeop with a little help from react-player by @CookPete - for a blog project. Planning to contribute to react-ui-cards where applicable, but contributions here are definitely welcome.

Basic additions were border-radius, predetermined widths, a "navigation" card, a video card, a figure card (photo or diagram with white-background text instead of overlay).

Suggested changes to the original package will most likely entail making more props available on the existing components to build the ones I've added here, for dryness and clarity.

npm

https://www.npmjs.com/package/react-flex-ui-cards

Installation

$ yarn add react-ui-flex-cards

$ npm install --save react-ui-flex-cards

Development

Getting started

After cloning the repo, run the following commands to start the project in development mode with hot reload:

$ yarn
$ yarn run dev

Card types

Video card (added)

Video player using react player library, tested with YouTube and Vimeo sources https://www.npmjs.com/package/react-player

attribute	type	description
src	string	Valid video content url
width	string	css width value
height	string	css height value

Nav cards

Sticky user-based nav bars with menu option and collapsing banner image and avatar on scroll

attribute	type	description
avatar	string	url of user image
cardClass	string	'banner' or 'wide'
header	string	url of header background
githubUrl	string	a short description of the product
twitterUrl	integer	rating of the product (0-5). Not implemented yet.
linkedInUrl	string	url the 'buy now' button will link to
menu	array of objects	name and url keys as strings

Usage:

div style={{ position: 'sticky', top: '10px', zIndex: 33 }}>
        <NavCard
          githubUrl='https://github.com/dfrho'
          twitterUrl='https://twitter.com/rhodesdav'
          linkedInUrl='https://www.linkedin.com/in/rhodesdavid'
          cardClass='card banner'
          header='https://i.imgur.com/w5tX1Pn.jpg'
          avatar='https://i.imgur.com/uDYejhJ.jpg'
          name='Justin Case'
          positionName='Software Developer'
          menu={[
            {
              name: 'home',
              route: '/'
            },
            {
              name: 'blog',
              route: '/blog'
            },
            {
              name: 'projects',
              route: '/projects'
            }
          ]}
        />
      </div>

User cards

Cards representing users or people with the addition of a social icon bar instead of stats (followers, etc.)

attribute	type	description
cardClass	string	additional CSS classes you might want to apply to the Card. Putting 'float' here will enable an on-hover animation. 'banner' is 750px max width, 'block' is 350px width
href	string/null	optional url the card will link to when clicked
header	string	url to the image that will be displayed in the upper part of the card
avatar	string	url to the image that will be displayed in the center of the card
name	string	user's name
positionName	string	user's role
twitterUrl	string	optional url of user twitter feed
linkdInUrl	string	optional url of user LinkdIn feed
githubUrl	string	optional url of user github feed

Product cards

Cards representing products available for purchase.

attribute	type	description
photos	array	array of urls to photos of the product
price	string	the price that will be displayed in the upper lefthand corner
productName	string	name of the product
description	string	a short description of the product
rating	integer	rating of the product (0-5). Not implemented yet.
url	string	url the 'buy now' button will link to
className (added)	string	'banner', and 'block' signifying widths

News header card

Cards you can use on the news site, shows the title, author and date it was published. Click on image to see the exact news.

attribute	type	description
href	string/null	optional url the card will link to when clicked
thumbnail	string	url to the image that will be displayed in the background
author	string	author of aricle linked in href
date	string	date of publishing
className (added)	string	'roadblock', 'banner', and 'block' signifying widths