react-anchor

react-anchor

Functional factory to create anchor components that trigger custom actions. Uses event.preventDefault under the hood.

Installation

$ npm i --save react-anchor

Overview

var anchorFactory = require('react-anchor');
var open = require('open');

// create factory that generates links

var profileLinkFactory = anchorFactory({
  onClick: open,
  className: 'profile-link'
});

// create a new `<a>` tag

profileLinkFactory({
  href: 'gh/yoshuawuyts',
  children: '/yoshuawuyts',
  className: 'foo-bar'
});

creates the following component:

var opts = {
  className: 'profile-link foo-bar',
  href: 'gh/yoshuawuyts',
  onClick: handleClick.bind(this)
};

return react.DOM.a(opts, 'gh/yoshuawuyts');

function handleClick(e) {
  e.preventDefault();
  e.stopPropagation();
  open('gh/yoshuawuyts');
}

API

var linkFactory = AnchorFactory(openFunction)

Create a new anchorFactory, which returns an anchor component.

var AnchorFactory = require('react-anchor');
var router = require('./myRouter');

var anchorFactory = AnchorFactory(router.navigate, 'menu-link');

linkFactory(url, inner)

Call the newly created anchorFactory and create a new anchor tag.

If you're using an object as argument, note that className will extend the class set in the AnchorFactory. So if the anchorFactory provides .link and you create a tag with class .modal-link you get .link .modal-link.

var anchorTag = anchorFactory({
  href: 'gh/yoshuawuyts',
  children: '/yoshuawuyts',
  className: 'foo-bar'
});
var otherTag = anchorFactory({href: '/hello', className: 'sup'}, 'hello');

License

MIT © Yoshua Wuyts