<commit_before># JSXFromHTML

With `jsxfromhtml` you can easily convert html strings into React / React Native / Preact / Inferno (you know, JSX in general) components.

## Installation

```
yarn add jsxfromhtml

// or

npm install -S jsxfromhtml
```

## Usage

### Web

Web is quite simple. All you have to do is:

```jsx
const html = `<p>
  <span>text</span>
</p>`

() => <JSXFromHTML html={html} />
```

### Mapping

But you can do more! `jsxfromhtml` allows you to map HTML tags into custom components.

```jsx
const html = `<p>
  <a href="https://twitter.com/rafalfilipek">rafalfilipek</a>
</p>`

const SuperLink = (props) => {
  const { href, children } = props;
  const parts = href.match(/twitter\.com\/(.*)\/?/);
  if (parts) {
    const name = parts[1];
    return (
      <span>
        <img src={`https://twitter.com/${name}/profile_image?size=mini`} />
        <a href={href}>{name}</a>
      </span>
    );
  } else {
    return <a {...props} />;
  }
};

() => <JSXFromHTML html={html} mapElements={{ a: SuperLink }} />
```

With `mapElements` you can map any HTML tag into custom componetn. In this example we want to use our `SuperLink` component to show profile picture next to twitter username.

### Omitting

Sometimes you will get tags you don't want. Like `style` or `script`. To get rid of them just map them to `false`.

```jsx
const html = `<p>
  <span>hello</span>
  <script>alert(1)</script>
</p>`
```

### General mapping / React Native

While `mapElements` is quite cool for web we have to handle all tags in native just with `Text` and `View` components. That's why there are two more props `mapInline` and `mapBlock`.

```jsx
const html = `<p>
  hello <span>world</span> !
</p>`

  () => <JSXFromHTML mapInline={Text} mapBlock={View} html={html} />
```

You will get:

```jsx
  <View>
    <Text>hello </Text><Text>World</Text><Text> !</text>
  </View>
```

As you can see `jsxfromhtml` will wrap every text with is not inside some inline tag.

### Styling<commit_msg>Fix typo<commit_after># JSXFromHTML

With `jsxfromhtml` you can easily convert html strings into React / React Native / Preact / Inferno (you know, JSX in general) components.

## Installation

```
yarn add jsxfromhtml

// or

npm install -S jsxfromhtml
```

## Usage

### Web

Web is quite simple. All you have to do is:

```jsx
const html = `<p>
  <span>text</span>
</p>`

() => <JSXFromHTML html={html} />
```

### Mapping

But you can do more! `jsxfromhtml` allows you to map HTML tags into custom components.

```jsx
const html = `<p>
  <a href="https://twitter.com/rafalfilipek">rafalfilipek</a>
</p>`

const SuperLink = (props) => {
  const { href, children } = props;
  const parts = href.match(/twitter\.com\/(.*)\/?/);
  if (parts) {
    const name = parts[1];
    return (
      <span>
        <img src={`https://twitter.com/${name}/profile_image?size=mini`} />
        <a href={href}>{name}</a>
      </span>
    );
  } else {
    return <a {...props} />;
  }
};

() => <JSXFromHTML html={html} mapElements={{ a: SuperLink }} />
```

With `mapElements` you can map any HTML tag into custom componetn. In this example we want to use our `SuperLink` component to show profile picture next to twitter username.

### Omitting

Sometimes you will get tags you don't want. Like `style` or `script`. To get rid of them just map them to `false`.

```jsx
const html = `<p>
  <span>hello</span>
  <script>alert(1)</script>
</p>`
```

### General mapping / React Native

While `mapElements` is quite cool for web we have to handle all tags in native just with `Text` and `View` components. That's why there are two more props `mapInline` and `mapBlock`.

```jsx
const html = `<p>
  hello <span>world</span> !
</p>`

  () => <JSXFromHTML mapInline={Text} mapBlock={View} html={html} />
```

You will get:

```jsx
  <View>
    <Text>hello </Text><Text>World</Text><Text> !</Text>
  </View>
```

As you can see `jsxfromhtml` will wrap every text with is not inside some inline tag.

### Styling
{'fraction_non_alphanumeric': 0.16495362246176987, 'fraction_numerical': 0.001002757583354224, 'mean_word_length': 3.453125, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 81, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6752967', 'n_tokens_mistral': 1411, 'n_tokens_neox': 1362, 'n_words': 472}