senior-fe-challenge v0.1.14

senior-fe-challenge

Test Challenge: Tabulator Component

Install

npm i senior-fe-challenge

Controlled/Uncontrolled

The component gives the possibility to function as controlled or uncontrolled.

Controlled

  import { Tab, TabPane } from 'senior-fe-challenge'
  
  function App() {
  
    const [activeTab, setactiveTab] = useState('First Pane');
    
    const onActiveChange = (e: any) => {
        setactiveTab(e);
    }
    
    return(
      <Tab active={activeTab} onActiveChange={onActiveChange}> 
        <TabPane title="First Pane">
          First Pane Body
        </TabPane>
        <TabPane title="Second Pane">
          Second Pane Body
        </TabPane>
      </Tab>
    );
    
 }

Unontrolled

  import { Tab, TabPane } from 'senior-fe-challenge'
  
  function App() {
    return(
      <Tab initialActive={'First Pane'} > 
        <TabPane title="First Pane">
          First Pane Body
        </TabPane>
        <TabPane title="Second Pane">
          Second Pane Body
        </TabPane>
      </Tab>
    );
    
 }

Passing active and initialActive props at the same time will be a type error.

Props

TabPaneProps

TabProps