Breaking News: Grepper is joining You.com. Read the official announcement!

Tabs with React !

Add Answer

Anas Pirzada answered on June 11, 2022 Popularity 10/10 Helpfulness 1/10

answer Tabs with React !

related react-tabs

related react tabs

Tabs with React !

Comment

import React, { useState } from 'react';
import styled from 'styled-components';
const Tab = styled.button`
  font-size: 20px;
  padding: 10px 60px;
  cursor: pointer;
  opacity: 0.6;
  background: white;
  border: 0;
  outline: 0;
  ${({ active }) =>
    active &&
    `
    border-bottom: 2px solid black;
    opacity: 1;
  `}
`;
const ButtonGroup = styled.div`
  display: flex;
`;
const types = ['Cash', 'Credit Card', 'Bitcoin'];
function TabGroup() {
  const [active, setActive] = useState(types[0]);
  return (
    <>
      <ButtonGroup>
        {types.map(type => (
          <Tab
            key={type}
            active={active === type}
            onClick={() => setActive(type)}
          >
            {type}
          </Tab>
        ))}
      </ButtonGroup>
      <p />
      <p> Your payment selection: {active} </p>
    </>
  );
}
// Usage
<TabGroup/>

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: react.school

Tags: javascript tabs

Link to this answer
Share Copy Link

Contributed on Aug 21 2023

Anas Pirzada

0 Answers Avg Quality 2/10

Closely Related Answers

react-tabs

Comment

npm install --save react-tabs

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 20 2023

Rakib Hossain

0 Answers Avg Quality 2/10

react tabs

Comment

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

export default () => (
  <Tabs>
    <TabList>
      <Tab>Title 1</Tab>
      <Tab>Title 2</Tab>
    </TabList>

    <TabPanel>
      <h2>Any content 1</h2>
    </TabPanel>
    <TabPanel>
      <h2>Any content 2</h2>
    </TabPanel>
  </Tabs>
);

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.npmjs.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 11 2022

Gleaming Grasshopper

0 Answers Avg Quality 2/10

Tabs with React !

Contents

More Related Answers

Tabs with React !

Closely Related Answers

react-tabs

react tabs

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.