మీ React.js యాప్‌కి పాప్-అప్ ఎఫెక్ట్‌లను జోడించండి

మీ వినియోగదారు దృష్టిని ఆకర్షించడానికి మరియు ముఖ్యమైన సమాచారాన్ని ప్రదర్శించడానికి పాప్-అప్‌లు గొప్ప మార్గం. నిర్ధారణ సందేశాలు మరియు ఎర్రర్ మెసేజ్‌ల వంటి వాటి కోసం మీరు వాటిని ఉపయోగించవచ్చు. లేదా మీరు పేజీలోని మూలకం గురించి అదనపు సమాచారాన్ని చూపించడానికి వాటిని ఉపయోగించవచ్చు.

రియాక్ట్‌లో, పాప్-అప్‌లను సృష్టించడానికి రెండు మార్గాలు ఉన్నాయి: రియాక్ట్ హుక్స్ ఉపయోగించడం లేదా బాహ్య మాడ్యూల్ ఉపయోగించడం.

రోజు యొక్క వీడియోను తయారు చేయండి

React.jsలో పాప్-అప్‌లను ఎలా సృష్టించాలి

ప్రధమ, సాధారణ రియాక్ట్ యాప్‌ని సృష్టించండి . ఆ తర్వాత, మీరు రెండు పద్ధతుల్లో దేనినైనా ఉపయోగించి పాప్-అప్‌ని జోడించవచ్చు. మీరు రియాక్ట్ హుక్స్ లేదా బాహ్య మాడ్యూల్‌ని ఉపయోగించవచ్చు.

1. రియాక్ట్ హుక్స్ ఉపయోగించడం

హుక్స్ విధానం సరళమైనది మరియు కొన్ని లైన్ల కోడ్ మాత్రమే అవసరం.

మొదట, మీరు పాప్-అప్‌ను తెరవడానికి ఒక ఫంక్షన్‌ను సృష్టించాలి. మీరు పాప్-అప్‌ని ప్రదర్శించే కాంపోనెంట్‌లో ఈ ఫంక్షన్‌ని నిర్వచించవచ్చు.

తర్వాత, మీరు పాప్-అప్ కోసం స్టేట్ వేరియబుల్‌ని సృష్టించడానికి యూస్‌స్టేట్ హుక్‌ని ఉపయోగించాలి. పాప్-అప్ తెరవాలా వద్దా అని నిర్ణయించడానికి మీరు ఈ స్టేట్ వేరియబుల్‌ని ఉపయోగించవచ్చు.

చివరగా, మీరు పాప్-అప్‌ను ట్రిగ్గర్ చేసే మీ కాంపోనెంట్‌కు బటన్‌ను జోడించాలి. మీరు ఈ బటన్‌ను క్లిక్ చేసినప్పుడు, స్టేట్ వేరియబుల్‌ను ఒప్పుకు సెట్ చేయండి, ఇది పాప్-అప్ కనిపించేలా చేస్తుంది.

ఈ విధానం కోసం కోడ్‌ను పరిశీలించండి:

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

ముందుగా, ఈ కోడ్ కోర్ రియాక్ట్ లైబ్రరీ నుండి యూజ్‌స్టేట్ హుక్‌ని దిగుమతి చేస్తుంది. అప్పుడు, ఉదాహరణ ఫంక్షన్ isOpen అనే స్టేట్ వేరియబుల్‌ని సృష్టించడానికి useState హుక్‌ని ఉపయోగిస్తుంది. ఈ స్థితి వేరియబుల్ పాప్-అప్ తెరవాలా వద్దా అని నిర్ణయిస్తుంది.

తర్వాత, పాప్-అప్‌ను ట్రిగ్గర్ చేసే కాంపోనెంట్‌కు బటన్‌ను జోడించండి. మీరు ఈ బటన్‌ను క్లిక్ చేసినప్పుడు, స్టేట్ వేరియబుల్ ఒప్పుకు సెట్ చేయబడుతుంది, ఇది పాప్-అప్ కనిపించేలా చేస్తుంది.

చివరగా, పాప్-అప్‌ను మూసివేసే కాంపోనెంట్‌కు బటన్‌ను జోడించండి. మీరు ఈ బటన్‌ను క్లిక్ చేసినప్పుడు, స్టేట్ వేరియబుల్ తప్పుకు సెట్ చేయబడుతుంది, దీని వలన పాప్-అప్ అదృశ్యమవుతుంది.

ఒక బటన్‌తో ప్రతిస్పందించే పేజీ మరియు పాపప్ తెరవబడింది

2. బాహ్య మాడ్యూల్ ఉపయోగించడం

మీరు బాహ్య మాడ్యూల్‌ని ఉపయోగించి రియాక్ట్‌లో పాప్-అప్‌లను కూడా సృష్టించవచ్చు. మీరు ఈ ప్రయోజనం కోసం ఉపయోగించగల అనేక మాడ్యూల్స్ అందుబాటులో ఉన్నాయి.

ఒక ప్రసిద్ధ మాడ్యూల్ రియాక్ట్-మోడల్. react-modal అనేది రియాక్ట్‌లో మోడల్ డైలాగ్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతించే సరళమైన మరియు తేలికైన మాడ్యూల్.

రియాక్ట్-మోడల్‌ని ఉపయోగించడానికి, మీరు ముందుగా దీన్ని npm ఉపయోగించి ఇన్‌స్టాల్ చేయాలి:

npm install react-modal

మీరు రియాక్ట్-మోడల్‌ని ఇన్‌స్టాల్ చేసిన తర్వాత, మీరు దాన్ని మీ రియాక్ట్ కాంపోనెంట్‌లోకి దిగుమతి చేసుకోవచ్చు:

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

ఈ కోడ్‌లో, మీరు ఇప్పటికీ రియాక్ట్ హుక్స్‌ను ఉపయోగిస్తున్నారు కానీ రియాక్ట్-మోడల్ మాడ్యూల్‌తో ఉన్నారు. రియాక్ట్-మోడల్ మాడ్యూల్‌తో, మీరు పాప్-అప్‌కు మరింత కార్యాచరణను జోడించవచ్చు. మీరు గమనిస్తే, కోడ్ మునుపటి పద్ధతికి చాలా పోలి ఉంటుంది. ఒకే ఒక్క తేడా ఏమిటంటే, మీరు ఇప్పుడు మీ స్వంతంగా సృష్టించే బదులు రియాక్ట్ మోడల్ నుండి రియాక్ట్ మోడల్ కాంపోనెంట్‌ని ఉపయోగిస్తున్నారు.

ముందుగా, మీరు రియాక్ట్-మోడల్ మాడ్యూల్‌ను దిగుమతి చేసుకోవాలి. అప్పుడు, మీరు మీ పాప్-అప్ యొక్క కంటెంట్‌ను చుట్టడానికి ReactModal భాగాన్ని ఉపయోగిస్తారు. మోడల్ తెరిచి ఉండాలా వద్దా అని నిర్ణయించడానికి isOpen ప్రాప్ ఉపయోగించండి.

మీరు మీ పాప్-అప్‌ని సృష్టించిన తర్వాత, మీరు దానికి అదనపు ఫీచర్‌లను జోడించాలనుకోవచ్చు. ఉదాహరణకు, వినియోగదారు పాప్-అప్ వెలుపల క్లిక్ చేసినప్పుడు మీరు దాన్ని మూసివేయాలనుకోవచ్చు.

దీన్ని చేయడానికి, మీరు రియాక్ట్-మోడల్ కాంపోనెంట్ యొక్క onRequest ప్రాప్‌ని ఉపయోగించాలి. ఈ ఆసరా ఒక ఫంక్షన్‌ను దాని విలువగా తీసుకుంటుంది. వినియోగదారు మోడల్ వెలుపల క్లిక్ చేసినప్పుడు ఈ ఫంక్షన్ రన్ అవుతుంది.

ఉదాహరణకు, వినియోగదారు దాని వెలుపల క్లిక్ చేసినప్పుడు పాప్-అప్‌ను మూసివేయడానికి, మీరు క్రింది కోడ్‌ను ఉపయోగిస్తారు:

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

మేము onRequest ప్రాప్‌కి పంపుతున్న ఫంక్షన్ isOpen స్టేట్ వేరియబుల్‌ను తప్పుగా సెట్ చేస్తుంది. ఇది మోడల్ మూసివేయడానికి కారణమవుతుంది.

మీరు దీన్ని మరింత అనుకూలీకరించడానికి రియాక్ట్‌మోడల్ కాంపోనెంట్‌కు ఇతర ప్రాప్‌లను కూడా జోడించవచ్చు. ఆధారాల యొక్క పూర్తి జాబితా కోసం, మీరు రియాక్ట్-మోడల్ డాక్యుమెంటేషన్‌ను చూడవచ్చు.

ఫేస్‌బుక్‌లో ఫోటోలను ప్రైవేట్‌గా ఎలా తయారు చేయాలి

పాప్-అప్‌లలో స్టైలింగ్‌ని జోడిస్తోంది

మీరు మీ పాప్-అప్‌ని సృష్టించిన తర్వాత, మీరు దానికి కొంత స్టైలింగ్‌ని జోడించాలనుకోవచ్చు. రియాక్ట్ కాంపోనెంట్‌లను స్టైల్ చేయడానికి అనేక మార్గాలు ఉన్నాయి, కానీ మేము ఇన్‌లైన్ స్టైల్స్‌పై దృష్టి పెడతాము.

ఇన్‌లైన్ స్టైల్స్ అనేవి మీరు రియాక్ట్ కాంపోనెంట్‌కి నేరుగా జోడించగల స్టైల్స్. ఇన్‌లైన్ స్టైల్‌లను జోడించడానికి, మీరు స్టైల్ ప్రాపర్టీని ఉపయోగించాలి. ఈ లక్షణం ఒక వస్తువును దాని విలువగా తీసుకుంటుంది, ఇక్కడ కీలు శైలి లక్షణాలు మరియు విలువలు శైలి విలువలు.

ఉదాహరణకు, పాప్-అప్‌కు నేపథ్య రంగు తెలుపు మరియు 500px వెడల్పును జోడించడానికి, మీరు క్రింది కోడ్‌ని ఉపయోగిస్తారు:

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

ఈ కోడ్‌లో, మీరు బ్యాక్‌గ్రౌండ్‌కలర్ మరియు వెడల్పు లక్షణాలతో డివ్ ఎలిమెంట్‌కు స్టైల్ ప్రాపర్టీని జోడిస్తారు. నువ్వు కూడా రియాక్ట్ యాప్‌లో Tailwind CSSని ఉపయోగించండి మీ పాపప్‌లను స్టైల్ చేయడానికి.

పాప్-అప్‌లతో మార్పిడి రేటును పెంచండి

పాప్-అప్‌లు వినియోగదారుకు ముఖ్యమైన సమాచారాన్ని ప్రదర్శించడం ద్వారా మార్పిడి రేట్లను పెంచడంలో సహాయపడతాయి. ఉదాహరణకు, మీరు డిస్కౌంట్ కోడ్ లేదా ప్రత్యేక ఆఫర్‌ను ప్రదర్శించడానికి పాప్-అప్‌ని ఉపయోగించవచ్చు. మీ వార్తాలేఖ కోసం ఇమెయిల్ చిరునామాలను సేకరించడానికి మీరు పాప్-అప్‌ని కూడా ఉపయోగించవచ్చు. మీ రియాక్ట్ యాప్‌కి పాప్-అప్ జోడించడం అనేది మార్పిడి రేట్లను పెంచడానికి ఒక గొప్ప మార్గం.

మీరు GitHub పేజీలలో ఉచితంగా మీ రియాక్ట్ అప్లికేషన్‌ను కూడా సులభంగా అమలు చేయవచ్చు.