Installation

React npm i rr-coachmark

Usage

Import the package

    import Coachmark from 'rr-coachmark'

• Tambahkan data-atribute data-${namacoachmark} ke elemen DOM yang ingin di highlight. Atribut ini mengambil nomor yang akan menentukan urutan(steps) yang akan di highlight. Elemen DOM dengan atribut data-${namacoachmark} = 0 akan dihighlight sebelum elemen dengan atribut data-${namacoachmark} = 1

• Selanjutnya, tambahkan juga data atribut, data-${namacoachmark}-text untuk DOM elemen tooltip text dan data-${namacoachmark}-title untuk DOM elemen judul tooltip. Contoh:

    <div className='className'
        data-suggest="0"
        data-suggest-text="The tooltip text"
        data-suggest-title="The tooltip text"
        data-suggest-color="#526382" (optional, background-color highlight)
    >
       ....
    </div>

• Tambahkan target DOM dimana elemen tooltip akan di render

    <section id='rr-coachmark-${namacoachmark}'></section>

• Contoh :

    import Coachmark from 'rr-coachmark'
    class AppExample extends React.Component {

        render() {
            return (
                <>
                <section id='rr-coachmark-${namacoachmark}'></section>
                <Coachmark 
                    coachmarkName='suggest'
                    marginTop='1rem'
                    cookiesName={`suggest-${config.companyNameCSS}`} 
                    platform='desktop' />
                <div className='className'
                    data-suggest="0"
                    data-suggest-text="The tooltip text"
                    data-suggest-title="The tooltip text"
                >
                <h2 
                    data-suggest="1"
                    data-suggest-text="The tooltip text"
                    data-suggest-title="The tooltip text"
                >Example text</h2>
                </div>
                </>
            )
        }
    }

Props

    <Coacmark 
        coachmarkName='suggest' // (*) nama komponen coachmark
        marginTop='1rem' // margin top tooltip komponen ke highlight komponen
        saveName={`suggest-homepage`}  // (*) nama cookies yang akan tersimpan
        platform='desktop'  // terpasang di platform desktop atau mobile
        bgHighlight // menambahkan background sesuai bg-color highlight
        highlightPosition='absolute' // (*) menambahkan position highlight (default 'relative')
        themeDark // tema dark
        expiresTime={1095} // menambahkan expired cookies (default 1095)
    />

Props Detail

| Props | Options | Default | Description | | ------------------------ | --------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | coachmarkName | String bebas tetapi tidak boleh lebih dari 1 suku kata(ex: 'suggest') | none | Nama komponen coachmark yang akan dirender| | marginTop | String (ex: '2.5rem') | 2rem | Margin top tooltip komponen ke highlight komponen | | saveName | String bebas | null | Nama yang akan tersimpan di localstorage | | platform | ['mobile', 'desktop']| 'desktop' | Style yang terpasang di platform desktop atau mobile | | bghighlight | Boolean | false | Menambahkan background sesuai bg-color highlight | | highlightPosition | ['absolute', 'relative'] | 'relative' | Menambahkan position highlight | themeDark | Boolean | false | Tema dark | | expiresTime | Integer | {1095} | Menambahkan expired cookies | | paddingHighlight | String (ex: '1rem') | 0.2rem | Memberikan padding elemen higlight |