React Dynamic Tabs

A React component that allows users to create dynamic tabs with custom colors.

Installation

To install the react-dynamic-tabs package, run the following command:

npm install react-dynamic-tabs

Usage

1. Import the Tabs component from the react-dynamic-tabs package:

import Tabs from 'react-dynamic-tabs';

2. Render the Tabs component in your React app and set the initial state for the tabs:

function App() {
  const [tabs, setTabs] = useState([
    { label: 'Tab 1', content: 'This is the content for Tab 1' },
    { label: 'Tab 2', content: 'This is the content for Tab 2' },
  ]);

  return (
    <div>
      <Tabs tabs={tabs} setTabs={setTabs} />
    </div>
  );
}

3. Customize the appearance of the tabs by passing in custom colors as props:

<Tabs
  tabs={tabs}
  setTabs={setTabs}
  tabColor="#EDEDED"
  activeTabColor="#FFFFFF"
  tabTextColor="#000000"
  activeTabTextColor="#FFFFFF"
/>

4. Add new tabs by clicking the "Add Tab" button and delete tabs by clicking the "x" icon on the tab.

Contributing

If you would like to contribute to the react-dynamic-tabs package, please fork the repository and submit a pull request with your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

If you have any questions or comments, please email me at [email protected].