UnpopularTabs Documentation

The UnpopularTabs component allows you to create a modern tabbed interface with customizable styles and features.

Props

The UnpopularTabs component accepts the following props:

Prop	Type	Description
tabs	Array	An array of objects representing the tabs.
tabStyle	Object	An object representing the styles for the tabs.
contentStyle	Object	An object representing the styles for the content.
transitionDuration	String	The duration of the transition effect in milliseconds.
activeTabStyle	Object	An object representing the styles for the active tab.
iconSize	String	The size of the icons in the tabs.
animatedContent	Boolean	Whether to animate the content.

Basic Usage

const tabs = [
  { label: "Tab 1", content: <p>This is the content of Tab 1.</p>, icon: '📚' },
  { label: "Tab 2", content: <p>This is the content of Tab 2.</p>, icon: '🔍' },
  { label: "Tab 3", content: <p>This is the content of Tab 3.</p>, icon: '⚙️' },
];

// Usage
<UnpopularTabs tabs={tabs} />

📚Tab 1

🔍Tab 2

⚙️Tab 3

This is the content of Tab 1.

Custom Styles

const tabStyle = {
  backgroundColor: '#e9ecef',
  color: '#333',
};

const activeTabStyle = {
  backgroundColor: '#007bff',
  color: '#fff',
  fontWeight: 'bold',
};

const contentStyle = {
  padding: '20px',
  backgroundColor: '#fff',
};

// Usage
<UnpopularTabs
  tabs={tabs}
  tabStyle={tabStyle}
  activeTabStyle={activeTabStyle}
  contentStyle={contentStyle}
  iconSize="30px"
  transitionDuration="0.5s"
/>

📚Tab 1

🔍Tab 2

⚙️Tab 3

This is the content of Tab 1.

Conclusion

The UnpopularTabs component is a reusable component that displays a list of tabs and their corresponding content. It allows users to switch between different tabs and view the content associated with each tab.