open-index/open-npm huggingface dataset:
npm package: @oriun/use-media
Description: A React hook to implement component-level media queries and size changes in JavaScript.
Latest version: 1.2.3

# @oriun/use-media

A React hook to implement component-level media queries and size changes in JavaScript.

> Works with pixel-based breakpoints only for now.

## Installation

```bash
npm install @oriun/use-media
```

## Usage

Attach the ref on the container you want to track then render the children based on the media query.

```jsx
import React from "react";
import useMedia from "@oriun/use-media";

// Define breakpoints with css-like syntax
const breakpoints = {
  mobile: "max-width: 450px",
  tablet: "(min-width: 451px) and (max-width: 1024px)",
  desktop: "min-width: 1025px",
};

const App = () => {
  // Get the current breakpoint status
  const [{ mobile, tablet, desktop }, ref] = useMedia(breakpoints);

  // Render your app based on
  return (
    <div ref={ref}>
      <h1>Current breakpoint:</h1>
      {mobile && <p>Mobile</p>}
      {tablet && <p>Tablet</p>}
      {desktop && <p>Desktop</p>}
    </div>
  );
};

export default App;
```

You can also pass and object with numbers as values to use the `min-width` media query.

```js
const breakpoints = {
  mobile: 0, // equivalent to "min-width: 0px"
  tablet: 450, // equivalent to "min-width: 450px"
  desktop: 1024, // equivalent to "min-width: 1024px"
};
```

## Typescript

You need to specify the type of the element you want to track.
Example with a `div`:

```tsx
const App: React.FC = () => {
  const [{ mobile, tablet, desktop }, ref] =
    useMedia<HTMLDivElement>(breakpoints);
  // ...
  return <div ref={ref}>// ...</div>;
};
```

## Caveats

- The hook will only work with pixel-based breakpoints for now.
- At the first render, all breakpoints will be evaluated as false since the ref is not yet allocated.
- The queries implement the `min-width`, `max-width`, `min-height`, `max-height` and the `and` keywords, but doesn't support the `not` or `or` keyword.
npm package: @oriun/x-men
Description: XML parser
Latest version: 1.0.12


# X-men

Dependance-free XML parser


## Features

- XML parsing




## Installation

Install with yarn or npm

```bash
  yarn add @oriun/x-men
```
    
## Usage/Examples

We'll use this XML content as `data` for the examples below :
```xml
<note>
    <to>Tove</to>
    <to>Dany</to>
    <to>Kayle</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
    <date type="unix">
        1639688607324
    </date>
</note>
```

First import the package and call the `xml` class to parse your content, then navigate into the tree as an object :

```javascript
const Xmen = require('@oriun/x-men')

const data = "*** our xml content ***"

const { root } = new Xmen.xml(data)

const noteContent = root.note.body.$innerXML
// "Don't forget me this weekend!"

const recipients = root.note.to.$innerXML
// [ 'Tove', 'Dany', 'Kayle' ]

const date = root.note.date
// { $tagName: "date", $attributes: { "type": "unix"}, "$children": [...]}

let fullDate
if(date.type === "unix"){ // assertion ok
    fullDate = new Date(parseInt(date.$innerXML))
    // Date Thu Dec 16 2021 22:03:27 GMT+0100 ...
}
```
Note that the tree is immutable for now, next versions will add features for tree manipulation.


## Properties
Considering the following XML:
```xml
<article id="42" type="blogpost">
    <title>Hello</title>
    <subtitle>world</subtitle>
</article>
```
#### $tagName
The tag name : `article`
#### $attributes
The tag attributes : `{ id: "42", type: "blogpost" }`
#### $children
The children tags : `[ { $tagName: "title",...}, { $tagName: "subtitle"}]`
#### $innerXML
The content of the tag : 
```xml
<title>Hello</title><subtitle>world</subtitle>
```
#### $outerXML
The content of the tag, including the tag itself : 
```xml
<article id="42" type="blogpost"><title>Hello</title><subtitle>world</subtitle></article>
```


## Naming issues
For ergonomy, navigating into the tree is simplified. For example `root.note.to` will first search for tag `to` in `note.$children`, then for property `to` in `note.$attributes` and finally for property `to` on the `note` object itself.
```javascript
    const data = `
    <note children="todo">
        <children> A child list </children>
        <another> tag </another> 
    </note>`

    const { root } = new Xmen.xml(data)

    const children = root.note.children
    // "A child list"
    // Can't get the full list of child with this syntax
```

If your content may contain overlapping tags or attributes, consider using Xmen class specific properties : `$tagName, $attributes, $children, $innerXML and $outerXML`
```javascript
    const children = root.note.$children
    /* [
        { $tagName: "children", ...},
        { $tagName: "another", ...}
    ] */

    const noteAttribute = root.note.$attributes.children
    // "todo"
```
## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @orizens/react-be
Description: bootstrap element primitive component with utility classes and auto-completion - a la &#x27;styled&#x27; jsx, just with readable classes
Author: orizens
Latest version: 0.0.5

# @orizens/react-be

> Bootstrap Element is a primitive component with typed utility classes and auto-completion - a la &#x27;styled&#x27; jsx, just with readable classes

[![NPM](https://img.shields.io/npm/v/@orizens/react-be.svg)](https://www.npmjs.com/package/@orizens/react-be) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install React-BE

```bash
npm install --save @orizens/react-be
```

Make sure your project includes bootstrap.

## WHY?

Bootstrap is still popular and along with that, react-bootstrap is as well.
React-BE solves the problem of development experience and adds auto-completion for bootstrap utility functions.

## DEMO

https://orizens.github.io/-orizens-react-be/

## Usage

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

import { Be, Row, H4, Section, Flex, Div, Ol, Li } from '@orizens/react-be'

function Example() {
  return (
    <Section>
      <H4 text='dark'>React-BE</H4>
      <Column col='10'>
        <Be flex='row' overflow='auto'>react-be is a time saver</Be>
        <Flex flex='row'>
          <Div>
            <Ol>
              <Li>there are more elements - with FULL Typescript support</Li>
              <Li>more elements are coming soon...</Li>
            </Ol>
          </Div>
        </Flex>
      </Column>
    </Section>
  )
}
```

## Support HTML-Elements powered by React-BE

these are the elements that are available with React-Be typings:

Flex, Column, Row, P, Img, Li, on, Div, Section, Ol, Ul, Span, H1, H2, H3, H4, H5, H6

more to come.

## Future Features

- [x] support these elements with typescript: img
- [x] support column size
- [ ] support responsive variations (i.e, flex-md-column, col-md-2)
- [ ] add support for mulitple values for special utilities (or all)
- [x] add built in utility-elements: Flex, Column, Row, P, Img, Li, on, Div, Section, Ol, Ul, Span, H1, H2, H3, H4, H5, H6
- [ ] add more built in utility/html-elements: b, em, nav, footer, a, etc..

## License

MIT © [orizens](https://github.com/orizens)
npm package: @oriziv/figma-theme
Description: Generate development-ready theme JSON files from Figma Styles
Author: Brent Jackson
Latest version: 1.0.2


# figma-theme

Generate development-ready theme JSON files from Figma Styles

- Parse [Styles][] from a Figma file ID
- Works with [Styled System][] and other CSS-in-JS setups
- Built with [figma-js][]

```sh
npm i figma-theme
```

## Getting Started

1. Install `figma-theme` as a dev dependency in your project
2. Get a [personal access token][token] for the Figma API
3. Create a `.env` file with your access token
  - `FIGMA_TOKEN=<personal-access-token>`
  - Alternatively add an environment variable for `FIGMA_TOKEN`
4. Add an npm run script: `figma-theme <figma-file-id>`
5. Run the script to create a `theme.json` file based on Figma Styles

## Options

Options can be passed as CLI flags or included in a `figma-theme` object in your `package.json`

- `--out-dir`: output directory (default current working directory)
- `--metadata`: include additional metadata from the Figma API

[Styles]: https://help.figma.com/properties-panel/styles
[Styled System]: https://jxnblk.com/styled-system
[token]: https://www.figma.com/developers/docs#auth-dev-token
[figma-js]: https://github.com/jongold/figma-js

<!--
- TRi6YSk76405ImoatoMF1u28
- 2aMG4hw2qp3jSTGmtAMyhZ
- JGLoPfwRFqCwn4xZ8wUmSwp7
- Yw9L6FATzLpdcsnA5vdSgCRT
-->