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
- Import the
Tabs
component from thereact-dynamic-tabs
package:
import Tabs from 'react-dynamic-tabs';
- 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>
);
}
- 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"
/>
- 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 gustavobmachado105@gmail.com.