How to use button to pop up video window(ReactJs)-CodePudding

i'm trying to make a button that use the same style but want to use it for two button (1) go to some page (2) to pop up a video trailer. but both of them do the action (1). I don't know how to make these two button do different job.

here is the code for Button,

import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';

const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];

const SIZES = ['btn--medium', 'btn--large'];

export const Button = ({
  children,
  type,
  onClick,
  buttonStyle,
  buttonSize
}) => {
  const checkButtonStyle = STYLES.includes(buttonStyle)
    ? buttonStyle
    : STYLES[0];

  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];

  return (
    <Link to={Button.props.action} className='btn-mobile'>
      <button
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
        onClick={onClick}
        type={type}
      >
        {children}
      </button>
    </Link>
    
  );

};

here is the code for two buttons

function HeroSection() {
  return (
    <div className='hero-container'>
      <video src='/videos/animated-banner.mp4' autoPlay loop muted playsInline/>
      <h1>TITLE</h1>
      <p> simple text.</p>
      <div className='hero-btns'>
        <Button
          className='btns'
          buttonStyle='btn--outline'
          buttonSize='btn--large'
        >
          GET STARTED
        </Button>
        
        <Button
          className='btns'
          buttonStyle='btn--primary'
          buttonSize='btn--large'
          onClick={console.log('hey')}
        >
          WATCH TRAILER <i className='far fa-play-circle' />
        </Button>
      </div>
    </div>
  );
}

export default HeroSection;

CodePudding user response：

you can use onClick event for different jobs.

        <Button
          className='btns'
          buttonStyle='btn--outline'
          buttonSize='btn--large'
          onClick={() => {
             // ...go to some page...
          }}

        >
          GET STARTED
        </Button>
        
        <Button
          className='btns'
          buttonStyle='btn--primary'
          buttonSize='btn--large'
          onClick={() => {
             // ...open pop up...
          }}
        >
          WATCH TRAILER <i className='far fa-play-circle' />
        </Button>

CodePudding user response：

IMO, I think you could add new props to and conditionally use tag either Link or button by checking that props. If you pass value to props to then will be rendered as Link, else as button

import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';

const STYLES = ['btn--primary', 'btn--outline', 'btn--test'];

const SIZES = ['btn--medium', 'btn--large']

export const Button = ({
  children,
  type,
  onClick,
  buttonStyle,
  buttonSize,
  to
}) => {
  const checkButtonStyle = STYLES.includes(buttonStyle)
    ? buttonStyle
    : STYLES[0];

  const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];

  const ActionTag = to ? Link : 'button';

  return (
      <ActionTag
        className={`btn ${checkButtonStyle} ${checkButtonSize}`}
        onClick={onClick}
        type={type}
        to={to}
      >
        {children}
      </ActionTag>
    
  );

};

and you could use that component like this.

If it's used to navigate to other page, pass value to props to
For popping up a video trailer pass props onClick

<Button
  className='btns'
  buttonStyle='btn--outline'
  buttonSize='btn--large'
  onClick={
  // do something
  }
>
  pop up
</Button>

<Button
  className='btns'
  buttonStyle='btn--primary'
  buttonSize='btn--large'
  to="/"
>
  go to home
</Button>