Nine Parsecs from Milwaukee

    itsa-react-stars

    16.0.4 • Public • Published

    Build Status

    Lightweight svg Star ranking for react.

    Lightweight and comes with listeners.

    How to use:

    const React = require("react"),
        ReactDOM = require("react-dom"),
        Component = require("./lib/component-styled.jsx");
     
    let props = {
        emptyColor: '#aaa',
        fillColor: '#ffa500',
        fullStars: true,
        size: '5em',
        stars: 3.5, // <-- the most important property: it sets the number of filled stars
        strokeWidth: 3,
        onClick: starNr => {
            if (starNr===1) {
                props.stars = (props.stars===1) ? 0 : Math.min(1, props.stars+0.5);
            }
            else {
                props.stars = (props.stars===starNr) ? starNr-0.5 : starNr;
            }
            renderFn();
        }
    };
     
    const renderFn = () => {
        ReactDOM.render(
            <Component {...props} />,
            document.getElementById("component-container")
        );
    };
     
    renderFn();

    About the css

    You need the right css in order to make use of itsa-react-stars. There are 2 options:

    1. You can use the css-files inside the css-folder.
    2. You can use: Component = require("itsa-react-stars/lib/component-styled.jsx"); and build your project with webpack. This is needed, because you need the right plugin to handle a requirement of the scss-file.

    View live example

    API

    If you want to express your appreciation

    Feel free to donate to one of these addresses; my thanks will be great :)

    • Ether: 0xE096EBC2D19eaE7dA8745AA5D71d4830Ef3DF963
    • Bitcoin: 37GgB6MrvuxyqkQnGjwxcn7vkcdont1Vmg

    Install

    npm i itsa-react-stars

    DownloadsWeekly Downloads

    0

    Version

    16.0.4

    License

    BSD-3-Clause

    Unpacked Size

    1.09 MB

    Total Files

    40

    Last publish

    Collaborators

    • itsasbreuk