Have ideas to improve npm?Join in the discussion! »

    teaflip
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Teaflip

    A react component which tracks each member of yours teams drink consumption, allowing you to select who is in the next round, and it will randomly select a person to make it.

    The component tracks the data locally and provides optimistic UI, it does not however implement any way to persist the data. It does however return the winner and the people in each round when a winner is chose to allow you to implement data persistence.

    How to use

    Install the component to your project

    yarn add teaflip
    

    or

    npm install teaflip
    

    Import the component

    import Teaflip from 'teaflip';

    Required props

    The component expects a two props, "people" and "onWinner".

    People

    An array of objects with the 4 following properties.

    Property Type Notes
    id Int Must be unique
    name String
    cupsdrank Int
    roundsmade Int
    const data = [
        {
            id: 1,
            name: "John Smith",
            cupsdrank: 0,
            roundsmade: 0
        },
        ...
    ]

    onWinner

    A function that returns the winner and the people in the round.

    handleWinner = (winner, round) {
     
    }

    Example

     
    const handleWinner = (winner, round) {
        //winner is an object of the winner
        //round is an array of object for each person in the round with their updated values
    }
     
    const Component = () => {
        return (
            <>
                <h1>Teaflip</h1>
                <Teaflip people={data} onWinner={handleWinner} />
            </>
        )
    }

    Todo

    • Add readme
    • Expose the results of each round
    • [] Refactor with hooks

    Install

    npm i teaflip

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    304 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar