# explang

> Generic React component to explore any programming language

Latest version **1.0.10** (published 2021-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install explang
pnpm add explang
yarn add explang
bun add explang
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2021-10-24 |
| First published | 2021-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 234.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nathan Soufflet |
| Maintainers | nathsou |
| Keywords | Playgroud, Editor, Programming, Languages |

## Links

- npm: https://www.npmjs.com/package/explang
- npm.io page: https://npm.io/package/explang

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.10 (latest) — 2021-10-24
- 1.0.9 — 2021-10-24
- 1.0.8 — 2021-10-24
- 1.0.7 — 2021-10-23
- 1.0.6 — 2021-10-23
- 1.0.5 — 2021-10-22
- 1.0.4 — 2021-10-20
- 1.0.3 — 2021-10-20
- 1.0.2 — 2021-10-20
- 1.0.1 — 2021-10-20
- 1.0.0 — 2021-10-20

## README

# ExpLang

A generic React component to create playgrounds to explore any programming language.

## Usage

Add the following peer dependencies to your `package.json`'s devDependencies :

```json
"@geoffcox/react-splitter": "^2.1.0",
"ace-builds": "^1.4.12",
"react-ace": "^9.4.0"
```

```typescript
import { Playground, ButtonActions, Samples } from 'explang';

// create as many actions as needed, they will be turned into buttons in the top bar
// here we create two buttons to run and disassemble a piece of code
const actions: ButtonActions = {
  Run: async (code, setOutput) => {
    setOutput('running...');
    const res = await compile(code);

    if (res.isSuccess) {
      setOutput(await run(res.output));
    } else {
      setOutput(`Error: ${res.error}`);
    }
  },
  Disassemble: async (code, setOutput) => {
    setOutput(await disassemble(code));
  },
};

const samples: Samples = {
  'Fibonacci': `fn fib(n: usize) { ... }`,
  'Factorial': `fn fact(n: usize) { ... }`,
};

export const App = () => (
  <Playground
    actions={actions}
    samples={samples}
    // available modes : https://github.com/thlorenz/brace/tree/master/mode
    aceMode='rust'
  />
);
```

## Screenshot

![res/yolang-playground.png](res/yolang-playground.png)

---
_Source: https://npm.io/package/explang · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._