CODEWITHSUNDEEP
cssreactjsreact-hooksjsx
user13427179
user13427179

Reputation:

how to copy color in clipboard , reactjs

I am beginner in reactjs, I want to copy a color when I click on color.

How should it be done?

import React from 'react';

const Green = ()=>{
        return (
            <div>
            <h1 className='g-color-title'>Green Color</h1>
             <div className='container-fluid'>
                 <div className='div-style' id='color31'> #2ECC72 </div>
                 <div className='div-style' id='color32'> #26AE60 </div>
                 <div className='div-style' id='color33'> #6AB04A </div>
                 <div className='div-style' id='color34'> #43BE31 </div>
                 <div className='div-style' id='color35'> #10A881 </div>
                 <div className='div-style' id='color36'> #019031 </div>
                 <div className='div-style' id='color37'> #75DA8B </div>
                 <div className='div-style' id='color38'> #218F76 </div>
                 <div className='div-style' id='color39'> #218F76 </div>
                 <div className='div-style' id='color40'> #7CEC9F </div>
             </div>   
        </div>
        )   
}

export default Green;

Upvotes: 3

Views: 444

Answers (1)

Emre Koc
Emre Koc

Reputation: 1588

You can use navigator.clipboard.writeText() to copy text to the clipboard.

I would recommend using an object of colors, then with Object.entries() and map() create the <div>s and add an onClick() to trigger it:

const Green = () => {

    const colors = {
        color31: '#2ECC72',
        color32: '#26AE60',
        color33: '#6AB04A',
        color34: '#43BE31',
        color35: '#10A881',
        color36: '#019031',
        color37: '#75DA8B',
        color38: '#218F76',
        color39: '#218F76',
        color40: '#7CEC9F',
    };

    return (
        <div>
            <h1 className='g-color-title'>Green Color</h1>
            <div className='container-fluid'>
                {Object.entries(colors).map(([id, color]) => 
                    <div className='div-style' id={id} onClick={navigator.clipboard.writeText(color)}>{color}</div>
                )}
            </div>   
        </div>
    );

}

export default Green;

Upvotes: 1

Related Questions