gergely-nagy / react-pricing-table

:euro: Fast, flexible, simple pricing tables in React.
MIT License
24 stars 13 forks source link

Support custom components for PricingSlot's price & title #7

Open Coriou opened 5 years ago

Coriou commented 5 years ago

I think it'd be nice to support custom components for the PricingSlot price & title (possibly elsewhere too, these seem like the most important to be customisable to me).

I started working on this, I'll publish the branch to my fork soon (I want to test it more & write an example, possibly tests too).

Would you be open to this ?

Here's how it currently looks like:

<PricingSlot
    priceText="$ 200"
    priceAccessor={customPrice}
>
const customPrice = ({ className, text }) => {
    return (
        <li className={className}>
            <span>Starting at</span>
            <span>{text}</span>
        </li>
    )
}

The className & text props are "tags" & this.props.priceText respectively. Not sure we should pass them to custom components, but then again why not ? And I've made pretty much the same thing for the title, allowing for custom title component.

Thoughts ?

Coriou commented 5 years ago

A demo can be seen at: https://github.com/Coriou/react-pricing-table/tree/feature/custom-accessors

I've noticed some bugs while I was at it that I'd like to try and tacle too (unrelated to this feature)

Example screenshot: https://i.imgur.com/avv5x9g.png