@big-mon/react-component-amazon v1.0.8

@big-mon/react-component-amazon

For Amazon.co.jp's Item Block.

Amazon.co.jp 用の商品ブロックとして使用します。

Examples

DEMO

Installation

npm install --save @big-mon/react-component-amazon

or

yarn add @big-mon/react-component-amazon

Usage

import { AmazonBlock } from "@big-mon/react-component-amazon";

const App = () => (
  <div className="wrapper">
    <AmazonBlock asin={"ASIN_CODE"} id={"YOUR_AFFILIATE_CODE"}>
      ITEM_NAME
    </AmazonBlock>
  </div>
);

Default AmazonBlock component has no styles, only have className, for freedom customize.

If you will use DEMO's style, you can find styles at ./styles. Choose .css, .scss etc...

For Next.js User

If you use Next.js, you need additional install next-transpile-modules.

// next.config.js
const withTM = require("next-transpile-modules")([
  "@big-mon/react-component-amazon",
]);

module.exports = withTM({
  ...
});

CSS Module

// AmazonItem.tsx
import { AmazonBlock } from "@big-mon/react-component-amazon";
import styles from "./styles/amazon.module.scss";

type Props = {
  asin: string,
  children: React.ReactNode,
};

export function AmazonItem() {
  return (
    <div className={styles.amazonBox}>
      <AmazonBlock asin={"ASIN_CODE"} id={"YOUR_AFFILIATE_CODE"}>
        ITEM_NAME
      </AmazonBlock>
    </div>
  );
}

API

Memo

transpile component source

yarn build

transpiled files create at /dist.

check demo

yarn start

go to http:localhost:3001.

update demo page -> GitHub-Pages

yarn run publish-demo

check package content

npm pack

create .tgz file at ./, import your test app.

publish npm package

npm publish --access=public