npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

paypal-sdk-logos

v1.0.3

Published

JSX/SVG logos for PayPal.

Downloads

8,463

Readme

PayPal SDK Logos

Logos for PayPal SDKs.

Render using JSX with HTML

/** @jsx node */

import { PayPalLogo, LOGO_COLOR } from 'paypal-sdk-logos';
import { node, html } from 'jsx-pragmatic';

function render() {
    return (
        <PayPalLogo logoColor={ LOGO_COLOR.WHITE } />
    ).render(html());
}

Render using JSX with React

/** @jsx node */

import React from 'react';
import { PayPalLogo, LOGO_COLOR } from 'paypal-sdk-logos';
import { node, react } from 'jsx-pragmatic';

function render() {
    return (
        <PayPalLogo logoColor={ LOGO_COLOR.WHITE } />
    ).render(react({ React }));
}

Render using vanilla JavaScript and HTML

import { PayPalLogo, LOGO_COLOR } from 'paypal-sdk-logos';
import { html } from 'jsx-pragmatic';

function render() {
    return PayPalLogo({ logoColor: LOGO_COLOR.WHITE });
        .render(html());
}

Quick Start

Getting Started

  • Fork the module
  • Run setup: npm run setup
  • Start editing code in ./src and writing tests in ./tests
  • npm run build

Building

npm run build

Tests

  • Edit tests in ./test/tests

  • Run the tests:

    npm run test

Testing with different/multiple browsers

npm run karma -- --browser=PhantomJS
npm run karma -- --browser=Chrome
npm run karma -- --browser=Safari
npm run karma -- --browser=Firefox
npm run karma -- --browser=PhantomJS,Chrome,Safari,Firefox

Keeping the browser open after tests

npm run karma -- --browser=Chrome --keep-open

Publishing

Before you publish for the first time:
  • Delete the example code in ./src, ./test/tests and ./demo
  • Edit the module name in package.json
  • Edit README.md and CONTRIBUTING.md
Then:
  • Publish your code: npm run release to add a patch
    • Or npm run release:path, npm run release:minor, npm run release:major

FAQ

  • Who is this for?

    • Anyone who wants to get started quickly on a javascript library without setting up a lot of boilerplate
    • Anyone who wants a fairly healthy opinionated set of defaults to get started with
    • Anyone new to writing front-end modules, who doesn't want to immediately research which modules to use to build their code
  • Who this is not for?

    • Anyone who needs/wants tight control over their project, and which specific build tools they want to use
  • Why use technology X/Y/Z?

    Probably because it's been a good fit for us in the past. We wanted our focus to be around (fairly) standardized javascript as much as possible, rather than compiled-to-javascript languages, hence the use of babel, flow, etc.

  • So you just took a bunch of build-tools and daisy-chained them together?

    Yep, pretty much. This is not anything remotely technically impressive, or new, or innovative. It's just a healthy set of defaults to get started with if you're building a front-end distributable library.

  • Can I improve this template?

    By all means, please feel to raise a PR, but if it's a big change, try to open an issue first so we can chat!

  • What about support for React, Ember, framework X or Y?

    Wanted to keep this module as framework-agnostic as possible. Not to mention there are already pretty good boilerplates out there for whatever framework you're using, I'll bet. Otherwise please feel free to be my guest and fork grumbler-superawesomeframework if it's helpful.