Skip to content

Instantly share code, notes, and snippets.

@rcanepa

rcanepa/Price-with-usage.jsx

Forked from davidgilbertson/Price-with-usage.jsx
Created May 18, 2017 17:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rcanepa/7b080b4ba93ccda50b65fbe6c5308103 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rcanepa/7b080b4ba93ccda50b65fbe6c5308103 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @davidgilbertson davidgilbertson revised this gist Feb 25, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Price-with-usage.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -28,7 +28,7 @@ const Page = () => {

    return (
    <div>
    <p>One lamb is <Price>{lambPrice}</Price></p>
    <p>One lamb is <Price className="expensive">{lambPrice}</Price></p>
    <p>One jet is <Price showDecimals={false}>{jetPrice}</Price></p>
    <p>Those gumboots will set ya back <Price showDecimals={false} showSymbol={false}>{bootPrice}</Price> bucks.</p>
    </div>
  2. @davidgilbertson davidgilbertson created this gist Feb 25, 2017.
    36 changes: 36 additions & 0 deletions Price-with-usage.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    const Price = (props) => {
    const price = props.children.toLocaleString('en', {
    style: props.showSymbol ? 'currency' : undefined,
    currency: props.showSymbol ? 'USD' : undefined,
    maximumFractionDigits: props.showDecimals ? 2 : 0,
    });

    return <span className={props.className}>{price}</span>
    };

    Price.propTypes = {
    className: React.PropTypes.string,
    children: React.PropTypes.number,
    showDecimals: React.PropTypes.bool,
    showSymbol: React.PropTypes.bool,
    };

    Price.defaultProps = {
    children: 0,
    showDecimals: true,
    showSymbol: true,
    };

    const Page = () => {
    const lambPrice = 1234.567;
    const jetPrice = 999999.99;
    const bootPrice = 34.567;

    return (
    <div>
    <p>One lamb is <Price>{lambPrice}</Price></p>
    <p>One jet is <Price showDecimals={false}>{jetPrice}</Price></p>
    <p>Those gumboots will set ya back <Price showDecimals={false} showSymbol={false}>{bootPrice}</Price> bucks.</p>
    </div>
    );
    };