react-components-holusion : a collection of components made with react

Components

Button

A button is a clickable component that fits with its parent container https://material.io/design/components/buttons.html#specs

| Props | Types | Description | | -------- | ------------------- | ------------------------ | | children | string or component | It is the button content |

Card

A card is a component that describe an item which can have an image and some interaction (like selection)

| Props | Types | Description | | ------- | ---------------------- | --------------------------------- | | top | One or more components | Represents the top of the card | | primary | One or more components | Represents the all the card | | bottom | One or more components | Represents the bottom of the card | | image | string | The background image |

PlaylistItem

A PlaylistItem is a card that represents an item of a Playlist

| Props | Types | Description | | ----- | ------ | -------------------------------------- | | item | object | The item that will be change in a card | | image | string | The background image |

the props item should have this properties :

{
    "name": string,
    "rank": int,
    "active": bool,
    "_id": string
}

You can had options like this :

{
    "name": string,
    "rank": int,
    "active": bool,
    "_id": string,
    "options": {
        "onCheckboxChange": func(item, event),
        "onSwitchChange": func(item, event),
        "onClick": func(item, event),
        "onPlay": func(item, event),
        "onRemove": func(item, event),
        "current": bool,
        "selected": bool,
        "visible": bool,
        "image": string
    }
}

Playlist

A Playlist is a collection of PlaylistItem create by a collection of items

| Props | Types | Description | | ----- | --------------- | --------------------------------------------------------- | | items | array of object | A collection of items that will be passed on PlaylistItem |