Hello, I am new on front-end development and I want to use a <react activity calendar component> fro...

# kvision

[Mikaël]

Hello,
I am new on front-end development and I want to use a react activity calendar component from kvision.
Could you give me advice on the best way to initialize parameter data for this component.
Thanks for your help

[Robert Jaros]

`build.gradle.kts`:

[Robert Jaros]

sourceSets["main"].dependencies {
        implementation(npm("react-github-calendar", "^3.2.1"))
        implementation("io.kvision:kvision:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap:$kvisionVersion")
        implementation("io.kvision:kvision-bootstrap-css:$kvisionVersion")
        implementation("io.kvision:kvision-react:$kvisionVersion")
    }

[Robert Jaros]

`App.kt`:

[Robert Jaros]

external interface GitHubCalendarProps : PropsWithChildren {
var username: String
var year: String
// other properties
}

@Suppress("UnsafeCastFromDynamic")
val GitHubCalendar: ComponentClass<GitHubCalendarProps> = require("react-github-calendar").default

[Robert Jaros]

root("kvapp") {
            react {
                GitHubCalendar {
                    attrs.username = "rjaros"
                    attrs.year = "last"
                }
            }
        }

[Robert Jaros]

Hmm ... I think I created a sample with similar but different component ;-)

[Robert Jaros]

I just clicked around to find some useful docs and I've found something else ;-)

[Robert Jaros]

Here is what you've asked for.

[Robert Jaros]

implementation(npm("react-activity-calendar", "^1.4.3"))

[Robert Jaros]

external interface ActivityCalendarProps : PropsWithChildren {
    var data: dynamic
    // other properties
}

@Suppress("UnsafeCastFromDynamic")
val ActivityCalendar: ComponentClass<ActivityCalendarProps> = require("react-activity-calendar").default

[Robert Jaros]

root("kvapp") {
            react {
                ActivityCalendar {
                    attrs.data = arrayOf(obj {
                        date = "2021-05-20"
                        count = 16
                        level = 3
                    }, obj {
                        date = "2021-08-22"
                        count = 8
                        level = 2
                    }, obj {
                        date = "2021-11-25"
                        count = 13
                        level = 4
                    })
                }
            }
        }

[Mikaël]

Thanks, for your quick answer, I will try tomorrow.