open-index/open-npm huggingface dataset:
npm package: @lahzenegar/bbcode-to-react
Description: A utility for turning raw BBCode into React elements. 
Latest version: 0.2.11


# bbcode-to-react

A utility for turning raw BBCode into React elements.

## Installation

Install `bbcode-to-react` and __peer dependencies__ via NPM

```sh
npm install --save bbcode-to-react react
```

Import `bbcode-to-react`, example:

```js
import React from 'react';
import parser from 'bbcode-to-react';
import { renderToString } from 'react-dom/server';

const Example = (props) => {
  return (
    <p>{parser.toReact('[b]strong[/b]')}</p>
  );
}

// render: <p><strong>strong</strong></p>
console.log(renderToString(<Example />));


```

## Add new tag example

```js
import React from 'react';
import parser, { Tag } from 'bbcode-to-react';

class YoutubeTag extends Tag {
  toReact() {
    // using this.getContent(true) to get it's inner raw text.
    const attributes = {
      src: this.getContent(true),
      width: this.params.width || 420,
      height: this.params.height || 315,
    };
    return (
      <iframe
        {...attributes}
        frameBorder="0"
        allowFullScreen
      />
    );
  }
}

class BoldTag extends Tag {
  toReact() {
    // using this.getComponents() to get children components.
    return (
      <b>{this.getComponents()}</b>
    );
  }
}

parser.registerTag('youtube', YoutubeTag); // add new tag
parser.registerTag('b', BoldTag); // replace exists tag

const Example = (props) => {
  return (
    <p>{parser.toReact('[youtube width="400"]https://www.youtube.com/embed/AB6RjNeDII0[/youtube]')}</p>
  );
}

```

## Development

Install dependencies:

```sh
npm install
```

Run examples at [http://localhost:8080/](http://localhost:8080/) with webpack dev server:

```sh
npm start
```

Run tests & coverage report:

```sh
npm test
```

Watch tests:

```sh
npm run test-watch
```

# Credits

* **bbcodejs:** `bbcode-to-react` uses the parser from [bbcodejs](https://github.com/vishnevskiy/bbcodejs), so much of the credit is due there.
* **reactstrap:** `bbcode-to-react` uses the webpack config and publish scripts from [reactstrap](https://github.com/reactstrap/reactstrap).
npm package: @lahzenegar/react-checkbox-group
Description: A fork from https://github.com/ziad-saab/react-checkbox-group, modified and customized for Lahzenegar.
Author: Lahzenegar
Latest version: 1.0.1

# react-checkbox-group
### A fork from https://github.com/ziad-saab/react-checkbox-group
### Modified and customized for [Lahzenegar](https://lahzenegar.com/)

This is your average checkbox group:

```html
<div class="react-checkbox-group">
  <label><input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="apple" />Apple</label>
  <label><input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="orange" />Orange</label>
  <label><input onChange={this.handleFruitChange} type="checkbox" name="fruit" value="watermelon" />Watermelon</label>
</div>
```

Repetitive, hard to manipulate and easily desynchronized.
Lift up `name` and `onChange`, and give the group an initial checked values array:

```javascript
import {Checkbox, CheckboxGroup} from 'react-checkbox-group';

<CheckboxGroup name="fruits" value={['kiwi', 'pineapple']} onChange={this.fruitsChanged}>
  <Checkbox value="kiwi">Kiwi</Checkbox>
  <Checkbox value="pineapple">Pineapple</Checkbox>
  <Checkbox value="watermelon">Watermelon</Checkbox>
</CheckboxGroup>
```

Listen for changes, get the new value as intuitively as possible:

```javascript
<CheckboxGroup name="fruit" value={['apple','watermelon']} onChange={this.handleChange}>
...
</CheckboxGroup>
```

and further

```javascript
function handleChange(newValues) {
  // ['apple']
}
```

That's it for the API! See below for a complete example.

## Install

```sh
npm install react-checkbox-group
```

Simply require/import it to use it:

```javascript
var Check = require('react-checkbox-group');
var Checkbox = Check.Checkbox;
var CheckboxGroup = Check.CheckboxGroup;

// or ES6
import {Checkbox, CheckboxGroup} from 'react-checkbox-group';
```

## Example

```javascript
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fruits: ['apple','watermelon']
    };
  }

  componentDidMount() {
    // Add orange and remove watermelon after 5 seconds
    setTimeout(() => {
      this.setState({
        fruits: ['apple','orange']
      });
    }, 5000);
  }

  render() {
    // the checkboxes can be arbitrarily deep. They will always be fetched and
    // attached the `name` attribute correctly. `value` is optional
    return (
      <CheckboxGroup
        name="fruits"
        value={this.state.fruits}
        onChange={this.fruitsChanged}>

        <Checkbox value="apple"> Apple</Checkbox>
        <Checkbox value="orange"> Orange</Checkbox>
        <Checkbox value="watermelon"> Watermelon</Checkbox>
      </CheckboxGroup>
    );
  }
  
  fruitsChanged = (newFruits) => {
    this.setState({
      fruits: newFruits
    });
  }
  
};

ReactDOM.render(<Demo/>, document.body);
```

## License

MIT.
npm package: @lahzenegar/react-tv-navigation
Description: A react-tv-based implementation of Spatial Navigation by Luke Changc
Author: Raphael Amorim
Latest version: 0.5.1

# [React-TV-Navigation was migrated to raphamorim/react-tv](https://github.com/raphamorim/react-tv)  

> Navigation for TVs using React-TV with smooth scrolling using [https://github.com/fisshy/react-scroll](https://github.com/fisshy/react-scroll) 

[![CircleCI](https://circleci.com/gh/react-tv/react-tv-navigation/tree/master.svg?style=svg)](https://circleci.com/gh/react-tv/react-tv-navigation/tree/master)

tl;dr: [Based on Netflix TV Navigation System](https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8)

![React-TV Navigation Example](images/example.gif)

[See code from this example](https://github.com/react-tv/react-tv/blob/master/examples/navigation/src/App.js)

React-TV-Navigation is a separated package from React-TV renderer to manage focusable components.

## Installing

```bash
yarn add react-tv-navigation
```

React and [React-TV](http://github.com/react-tv/react-tv) are peer-dependencies.

## `withFocusable` and `withNavigation`

React-TV Navigation exports two functions: `withFocusable` and `withNavigation`.

A declarative navigation system based on HOC's for focus and navigation control.

```jsx
import React from 'react'
import ReactTV from 'react-tv'
import { withFocusable, withNavigation } from 'react-tv-navigation'

const Item = ({focused, setFocus, focusPath}) => {
  focused = (focused) ? 'focused' : 'unfocused'
  return (
    <div onClick={() => { setFocus() }} >
      It's {focused} Item
    </div>
  )
}

const Button = ({setFocus}) => {
  return (
    <div onClick={() => { setFocus('item-1') }}>
      Back To First Item!
    </div>
  )
}

const FocusableItem = withFocusable(Item)
const FocusableButton = withFocusable(Button)

function App({currentFocusPath}) {
  return (
    <div>
      <h1>Current FocusPath: '{currentFocusPath}'</h1>,
      <FocusableItem focusPath='item-1'/>
      <FocusableItem focusPath='item-2'/>
      <FocusableButton
        focusPath='button'
        onEnterPress={() => console.log('Pressed enter on Button!')}/>
    </div>
  )
}

const NavigableApp = withNavigation(App)

ReactTV.render(<NavigableApp/>, document.querySelector('#app'))
```

Soon we'll write a decent README.md :)

#### License by MIT
npm package: @lahzenegar/video-react
Description: Video-React is a web video player built from the ground up for an HTML5 world using React library.
Author: Farzad K
Latest version: 0.24.9


# video-react
[![npm version](https://badge.fury.io/js/video-react.svg)](https://badge.fury.io/js/video-react) [![Build Status](https://travis-ci.org/video-react/video-react.svg?branch=master)](https://travis-ci.org/video-react/video-react) [![Package Quality](http://npm.packagequality.com/shield/video-react.svg)](http://packagequality.com/#?package=video-react)

Video.React is a web video player built from the ground up for an HTML5 world using React library.


## Installation

Install `video-react` and __peer dependencies__ via NPM

```sh
npm install --save video-react react react-dom
```

import css in your app or add video-react styles in your page
```jsx
import "~video-react/dist/video-react.css"; // import css
```
or
```scss
@import "~video-react/styles/scss/video-react"; // or import scss
```
or
```html
<link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />
```

Import the components you need, example:

```js
import React from 'react';
import { Player } from 'video-react';

export default (props) => {
  return (
    <Player>
      <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
    </Player>
  );
};
```

## Development

Run tests:

```sh
npm test
```


### run from local

```bash
$ npm install
$ npm start
```

## Inspiration & Credits

* This project is heavily inspired by [video.js](http://www.videojs.com), and most of our css styles came from [video.js's styles](https://github.com/videojs/video.js/tree/master/src/css).
* The document site is built with [reactstrap](https://github.com/reactstrap/reactstrap).
* All the icons came from [Google Material Icons](https://material.io/icons/)
* Fonts were built by [iconmon](https://icomoon.io/).