Functional factory to create react anchor components
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintrc
.gitignore
.travis.yml
LICENSE
Makefile
README.md
index.js
package.json
test.js

README.md

react-anchor

NPM version build status Test coverage Dependency Status Downloads

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