open-index/open-npm huggingface dataset:
npm package: @globocom/with-match-media-props
Description: CSS Media Queries props injection HOC for React
Author: celiolatorraca
Latest version: 1.1.0

# with-match-media-props  [![NPM](https://img.shields.io/npm/v/@globocom/with-match-media-props.svg)](https://www.npmjs.com/package/@globocom/with-match-media-props) [![CircleCI](https://circleci.com/gh/globocom/with-match-media-props/tree/master.svg?style=shield)](https://circleci.com/gh/globocom/with-match-media-props/tree/master) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

> This is a HOC desgined to help you define props according to media queries breakpoints.
>
> Just as CSS media queries, you can combine and/or override props with multi-matching media queries.

## Install

```bash
npm install --save @globocom/with-match-media-props
```

## Usage

```js
withMatchMediaProps(
  matchMediaMapper: (ownerProps: Object) => Object | Object
): HigherOrderComponent
```

This HOC accepts a static object mapping `media-queries` to props, or a function that receives the component props and return the mapped `media-queries`.

Ex:

```jsx
import React, { Component } from 'react'

import withMatchMediaProps from '@globocom/with-match-media-props'

const Component = (props) => (
  <div>
    <span>MediaQuery: {props.mediaQuery}</span>
    <span>Is larger or equal to 360px: {!!props.mediaQuery360}</span>
    <span>Is larger or equal to 768px: {!!props.mediaQuery768}</span>
  </div>
)
const EnhancedComponent = withMatchMediaProps({
  'screen and (min-width: 360px)': {
    mediaQuery: 360,
    mediaQuery360: true,
  },
  'screen and (min-width: 768px)': {
    mediaQuery: 768,
    mediaQuery768: true,
  },
})(Component)

class Example extends Component {
  render () {
    return (
      <EnhancedComponent mediaQuery={1} otherProps="example" />
    )
  }
}
```

[📺 Check out live demo](https://globocom.github.io/with-match-media-props/)

## License

MIT © [globocom](https://github.com/globocom)
npm package: @globsecure/glob-navbar
Description: Bootstrap navbar component for React
Author: William Reis Fernandes
Latest version: 1.0.3

# glob-navbar
Glob NavBar is component on React

## Usage

```sh
npm install --save @globsecure/glob-navbar
```

## CSS Bootstrap - Dropdown without Javascript
```css
.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}
```

## Example
```js
import React, { PropTypes } from 'react';
import Container from '@hnordt/reax-container';
import Navbar from '@globsecure/glob-navbar';

const menuItems = [{
    title: 'Dropdown',
    items: [
        {title: 'Menu 1', href: '/dropdown-menu-1'},
        {title: 'Menu 2', href: '/dropdown-menu-2'}
    ]
  },
  {title: 'Menu 1', href: '/menu-1'},
  {title: 'Menu 2', href: '/menu-2'}
];


const App = ({ children }) => (
  <Container>
    <Navbar items={menuItems}/>
    {children}
  </Container>
);



App.propTypes = {
  children: PropTypes.node.isRequired
};

export default App;
```
npm package: @globules-io/cordova-plugin-android-remove-permissions
Description: Cordova remove unwanted permissions for Anfroid
Author: globules.io
Latest version: 1.0.5

# cordova-plugin-android-remove-permissions
Plugin for Cordova Android to remove unwanted permissions

## Usage
> Install the plugin

     cordova plugin add @globules-io/cordova-plugin-android-remove-permissions

> Add the unwanted permissions to the preference

     <preference name="AndroidRemovePermissions" value="INTERNET,BLUETOOTH" />