open-index/open-npm huggingface dataset:
npm package: @schibstedspain/sui-topbar
Description: A generic topbar component including:
Latest version: 5.0.7

## Description
A generic topbar component including:

- A dynamic dropdown main menu with custom class wrapper.
- A placeholder to dynamically pass components inside
- A dynamic dropdown secondary menu.

## Installation
Clone this repository to a local folder, `cd` into it and run:

```
$ npm install
```

## Start working in development mode

```
$ npm run dev
```

## Node dependencies
The component itself relies on the following node packages:

- "react": "^0.13.3"
- "@schibstedspain/theme-sui": "latest"

## Usage
Render the component in your entry point app as follows:

```
React.render(<suiTopbar />,
  document.getElementById(target));
```

## Data structure
This component has a main and secondary menu. Data is passed into the component using an `array` with the following structure:

```
const data = {
  mainmenu: [
    {item: 'main option 01', link: 'https://github.com/SUI-Components'},
    {item: 'main option 02', link: 'https://github.com/SUI-Components'},
    {...}
  ],
  secondarymenu: [
    {item: 'secondary option 01', link: 'https://github.com/SUI-Components'},
    {item: 'secondary option 02', link: 'https://github.com/SUI-Components'},
    {...}
  ]
};
```

## Passing children React Components inside SuiTopbar
If you create a parent component you can use SuiTopbar as an scaffolding to create a customized Topbar. To *fill* SuiTopbar with customized content you need to pass children React components.

First of all you need to properly import **SuiTopbar** and your child from the node_modules folder in your parent component:

```
import * as SuiTopbar from '@schibstedspain/sui-topbar';
import YourCustomComponent from '../YourCustomComponent';

```
Then, your parent component has to include both elements, SuiTopbar gathering data as props and wrapping your custom component in the render method as follows:

```
render() {
    return (
        <SuiTopbar.Topbar data={this.props.data}>
          <YourCustomComponent />
        </SuiTopbar.Topbar>
    );
  }
```


## Demo page
Check out the working demo at:
[http://sui-components.github.io/sui-topbar/](http://sui-components.github.io/sui-topbar/)