rr-coachmark v1.6.8

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