Made-with-heart NPM

Made with ♥

React component to easily add Made with ♥ to your project/whatever. Want a demo?

Getting Started

Grab it from npm

npm install made-with-heart

Add it to your project

/**
* @jsx React.DOM
*/

var React = require('react')
  , Heart = require('made-with-heart')

React.render(
  <Heart made="</>" heart="♥"/>,
  document.querySelector('#heart')
)

Expected output

</> with ♥

You can add any text or unicode to made or heart you may want.

API

###JavaScript/React

<Heart/> component expects 4 attributes:

made: the word/unicode to be used as first element
heart: the word/unicode to be placed after "with"
animation: array of css class(es) to animate heart
author: an object with name and link properties about the author. If author object is not specified, it doesn't display anything related to it (even the "by", of course).

There's a built-in animation to be used called hrt-beating, that does what you expect.

Heart does use CommonJS, if you're not using CommonJS, you can grab the compiled version at dist/, but React is also included.

###CSS/Stylus

Heart has built-in stylesheets, but you don't need to use it. You can make your own.

Here's the classes are being used, all of them are prefixed with hrt_:

.hrt: wrapper of the component
.hrt_made: class used on made
.hrt_heart: class used on heart
.hrt_author: class used on author
.hrt_heart--beating: class used for the animation of heart
hrt_animation--beating: @keyframe of beating.

If you're not using the built-in styles, the beating animation is not going to work. If you're not using Stylus (you're probably not), you can use the compiled version available at dist/.