open-index/open-npm huggingface dataset:
npm package: @rn-toolkit/mqtt
Description: Support MQTT in ReactNative, Base on MQTT.js
Author: @rn-toolkit
Latest version: 1.0.5

# @rn-toolkit/mqtt
Base on [MQTT.js](https://github.com/mqttjs/MQTT.js)

```bash
npm i @rn-toolkit/mqtt

#or

yarn add @rn-toolkit/mqtt
```

#### Use in React/ReactNative
```js

  useEffect(() => {
    const destroy = initMqtt(
      [
        {
          name: '/msg/+',
          cb: data => {
            console.log('/msg/+', data);
          },
        },
        {
          name: '/msg/1',
          cb: data => {
            console.log('/msg/1', data);
          },
        },
      ],
      {
        host: 'your host',
        port: 8083,
      },
    );
    return () => destroy();
  }, []);
```

#### TODO
- [ ] support [MQTTPattern](https://github.com/RangerMauve/mqtt-pattern)
npm package: @rn-tools/navigation
Description: Navigation primitives for React Native. Built on `react-native-screens` with integrated sheets and notifications support.
Latest version: 3.0.4

# @rn-tools/navigation

Navigation primitives for React Native. Built on `react-native-screens` with integrated sheets and notifications support.

## Installation

```bash
yarn expo install @rn-tools/navigation react-native-screens
```

## Quick Start

```tsx
import {
  createNavigation,
  Navigation,
  Stack,
  Tabs,
  type TabScreenOptions,
} from "@rn-tools/navigation";

const navigation = createNavigation();

const tabScreens: TabScreenOptions[] = [
  {
    id: "home",
    screen: <Stack id="home" rootScreen={<HomeScreen />} />,
    tab: ({ isActive, onPress }) => (
      <Pressable onPress={onPress}>
        <Text style={{ fontWeight: isActive ? "bold" : "normal" }}>Home</Text>
      </Pressable>
    ),
  },
  {
    id: "settings",
    screen: <SettingsScreen />,
    tab: ({ isActive, onPress }) => (
      <Pressable onPress={onPress}>
        <Text style={{ fontWeight: isActive ? "bold" : "normal" }}>Settings</Text>
      </Pressable>
    ),
  },
];

export default function App() {
  return (
    <Navigation navigation={navigation}>
      <Tabs id="main-tabs" screens={tabScreens} />
    </Navigation>
  );
}
```

Navigate screens, present sheets, and trigger notifications imperatively:

```tsx
navigation.stack.push(<DetailScreen />, { id: "detail" });
navigation.stack.pop();
navigation.tabs.tab(1);
navigation.sheets.present(<EditSheet />, { id: "edit", snapPoints: [320, 520] });
navigation.sheets.dismiss();
navigation.sheets.dismissAll();
navigation.notifications.present(<SavedNotification />, { id: "saved", position: "top", durationMs: 3000 });
navigation.notifications.dismiss();
navigation.notifications.dismiss("bottom");
navigation.notifications.dismiss("saved");
```

`durationMs` defaults to `3000`; pass `null` for persistent notifications.

Presented sheet and notification elements receive an injected optional `dismiss?: () => void` prop.

When no explicit target is provided:
- `push/pop/tab` resolve the deepest active stack/tabs node.
- `dismiss()` resolves the active sheet.
- `notifications.dismiss()` resolves the latest non-closing top-lane notification.

Hooks are also re-exported for convenience:
- `useSheetEntry` (from `@rn-tools/sheets`)
- `useNotificationEntry` (from `@rn-tools/notifications`)

Injected-prop typings are re-exported as well:
- `SheetInjectedProps`
- `NotificationInjectedProps`

## Docs

- [Navigation](docs/navigation.md) — setup, `createNavigation`, `NavigationClient` API (screens + sheets + notifications), hooks
- [Stack](docs/stack.md) — stack navigation, pushing/popping, refs, preloading, nesting
- [Tabs](docs/tabs.md) — tab navigation, tab bar, refs, preloading, nesting with stacks
- [Sheets](../sheets/README.md) — sheet setup, API, and props
- [Notifications](../notifications/README.md) — notification setup, API, and props
npm package: @rn-wendal/image-to-base64
Description: Convert image to base64
Author: image-to-base64
Latest version: 1.0.0


# rn-image-to-base64

This repo is a working rewrite of [this](https://github.com/wendal2841/rn-image-to-base64) abandoned library.
It provides a very simple way to convert an image to a base64 string.

If you encounter `OOM` errors on old android devices, make sure you optimize the image's size before you convert it. 
Indeed working with big images on Android might cause very high memory usage.

## Getting started

`npm install rn-image-to-base64 --save`
or
`yarn add rn-image-to-base64`


## Installation

`$ react-native link rn-image-to-base64`

## Usage
```javascript
import ImgToBase64 from 'rn-image-to-base64';

ImgToBase64.getBase64String('file://youfileurl')
  .then(base64String => doSomethingWith(base64String))
  .catch(err => doSomethingWith(err));
```
npm package: @rn-zh/rn-amap
Description: My new module
Author: lixy
Latest version: 1.0.8

# rn-amap

My new module

# API documentation

- [Documentation for the main branch](https://github.com/expo/expo/blob/main/docs/pages/versions/unversioned/sdk/rn-amap.md)
- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/rn-amap/)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install rn-amap
```

### Configure for iOS

Run `npx pod-install` after installing the npm package.


### Configure for Android



# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).
npm package: @rnacanvas/base-pairs
Description: Work with pairs between bases in a nucleic acid structure
Author: pzhaojohnson
Latest version: 2.10.0

# Installation

With `npm`:

```
npm install @rnacanvas/base-pairs
```

# Usage

All exports of this package can be accessed as named imports.

```javascript
// some example imports
import { knotless, radializable } from '@rnacanvas/base-pairs';
import { missing } from '@rnacanvas/base-pairs';
import { parseDotBracket } from '@rnacanvas/base-pairs';
```
npm package: @rnacanvas/code.url-params
Description: Handle URL parameters
Author: pzhaojohnson
Latest version: 9.0.0

# Installation

With `npm`:

```
npm install @rnacanvas/code.url-params
```

# Usage

All exports of this package can be accessed as named imports.

```javascript
// an example import
import { URLParamsHandler } from '@rnacanvas/code.url-params';
```

## `class URLParamsHandler`

The `URLParamsHandler` class handles URL parameters for a target RNAcanvas app
(see [@rnacanvas/app-object](https://pzhaojohnson.github.io/rnacanvas.app-object/)).

The below example draws a structure specified in dot-bracket notation
using the `sequence` and `dot_bracket` URL parameters.

```javascript
targetApp; // an RNAcanvas app object

var urlParamsHandler = new URLParamsHandler(targetApp);

// a URL specifying a structure to be drawn with dot-bracket notation
var url = new URL('https://code.rnacanvas.app?sequence=GCGCAAAAGCGC&dot_bracket=((((....))))');

// draws the specified structure in the target app
urlParamsHander.handle(url.searchParams);
```

CT files can be drawn using the `ct` URL parameter.

```javascript
// the URL of a CT file produced by UNAfold (formerly "mfold")
var ctFileURL = 'https://www.unafold.org/results/21/25Feb08-21-00-14/25Feb08-21-00-14_1.ct';

var url = new URL(`https://code.rnacanvas.app?ct=${ctFileURL}`;

urlParamsHandler.handle(url.searchParams);
```

Schemas can also be drawn using the `schema` URL parameter.

```javascript
// the schema to be drawn is accessible at this URL
var schemaURL = 'https://www.ebi.ac.uk/Tools/services/rest/r2dt/result/r2dt-R20240905-135809-0737-54467708-p1m/json';

var url = new URL(`https://code.rnacanvas.app?schema=${schemaURL}`);

// draws the schema
urlParamsHandler.handle(url.searchParams);
```
npm package: @rnacanvas/draw.bases.bonds
Description: Draw bonds between bases
Author: pzhaojohnson
Latest version: 12.3.0

# Installation

With `npm`:

```
npm install @rnacanvas/draw.bases.bonds
```

# Usage

All exports of this package can be accessed as named imports.

```javascript
// an example import
import { StraightBond } from '@rnacanvas/draw.bases.bonds';
```
npm package: @rnacanvas/draw.svg.text
Description: Work with SVG text elements
Author: pzhaojohnson
Latest version: 1.3.0

# Installation

With `npm`:

```
npm install @rnacanvas/draw.svg.text
```

# Usage

All exports of this package can be accessed as named imports.

```javascript
// an example import
import { CenterPoint } from '@rnacanvas/draw.svg.text';
```

## `CenterPoint`

The `CenterPoint` class represents the center point of a target SVG text element.

Note that the target SVG text element must be present within the document body
for center point calculations to be performed correctly
(since they are done based on the bounding box of the target SVG text element).

```javascript
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

text.textContent = 'A';
text.setAttribute('font-size', '12');
text.setAttribute('x', '100');
text.setAttribute('y', '150');

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.append(text);

// the target SVG text element must be present within the document body
// for center point calculations to be performed correctly
document.body.append(svg);

var centerPoint = new CenterPoint(text);

centerPoint.x; // 104.33333349227905
centerPoint.y; // 147

// can be set
centerPoint.x = 350;
centerPoint.y = 500;
```

### Listening for move events

Instances of the `CenterPoint` class can be listened to
for when the center point of the target SVG text element moves.

Lots of things can cause the center point of an SVG text element to move
(e.g., changes in `x` and `y` attributes, text content, font size, child `tspan` elements).

Bound listeners might sometimes get called
even when the center point of the target SVG text element
did not actually move.

```javascript
text; // the target SVG text element

var centerPoint = new CenterPoint(text);

var listener = () => {};
centerPoint.addEventListener('move', listener);

text.setAttribute('x', '1012');
listener; // called once

text.textContent += 'asdf';
listener; // called a second time

centerPoint.removeEventListener('move', listener);

centerPoint.x -= 500;
listener; // not called a third time
```
npm package: @rnacanvas/embedded
Description: Embed RNAcanvas in a webpage
Author: pzhaojohnson
Latest version: 4.0.0

Here's a [live example](https://codepen.io/pzjohnson/pen/xxoKvGp) on CodePen.

# Quickstart

The `RNAcanvas` app object constructor
can be loaded using a `<script>` element.

```html
<script id="RNAcanvas" type="module" >
  import 'https://cdn.jsdelivr.net/npm/@rnacanvas/embedded@3.1.0';
</script>
```

This will inject the `RNAcanvas` app object constructor into the global scope.

<b>Downstream code must wait for the script to load
before using the</b> `RNAcanvas` <b>app object constructor.</b>

Things like [jQuery](https://releases.jquery.com/)'s `.ready()` method can accomplish this.

```javascript
$('#RNAcanvas').ready(() => {
  // RNA drawing code here...
});
```

Alternatively, the `RNAcanvas` app object constructor
can be imported from an `npm` package (see section below).

## Drawing a structure

```javascript
// create a new RNAcanvas app instance
var rnaCanvas = new RNAcanvas();

// the RNAcanvas app must be added to the document body
// before drawing anything (see note below)
rnaCanvas.appendTo(document.body);

// control the size of the RNAcanvas app component
rnaCanvas.domNode.style.width = '1000px';
rnaCanvas.domNode.style.height = '750px';

// the structure to draw (using dot-bracket notation)
var seq = 'AGAGUAGCAUUCUGCUUUAGACUGUUAACUUUAUGAACCACGCGUGUCACGUGGGGAGAGUUAACAGCGCCC';
var dotBracket = '(((((((....)))))))...(((((((((((.....(((((.......)))))..))))))))))).....';

rnaCanvas.drawDotBracket(seq, dotBracket);

// make the drawing big enough to fit the drawn structure
// (and include some extra space around the drawn structure)
rnaCanvas.drawing.setPadding(1000);

// bring the drawn structure into view
rnaCanvas.drawingView.fitToContent();
```

The RNAcanvas app must be added to the document body of a webpage
for its RNA drawing functionality to work properly.

(This is an inherent aspect of SVG drawing functionality in general for web browsers.)

The RNAcanvas app can be added to any container node present in the document body
(not just the document body itself as shown in the example above).

## `npm` installation

```
npm install @rnacanvas/app-object
```

The `RNAcanvas` app object constructor can be accessed as a named import.

```javascript
import { RNAcanvas } from '@rnacanvas/app-object';
```

# Further documentation

See the [full documentation](https://pzhaojohnson.github.io/rnacanvas.app-object/) for the RNAcanvas app object.
npm package: @rnacanvas/forms.layout
Description: The Layout form
Author: pzhaojohnson
Latest version: 2.12.1

# Installation

With `npm`:

```
npm install @rnacanvas/forms.layout
```

# Usage

## `class LayoutForm`

The Layout form component.

The Layout form primarily serves to provide the user
with various functionality for controlling the layout of bases in a nucleic acid structure drawing.
npm package: @rnacanvas/forms.open
Description: The Open form
Author: pzhaojohnson
Latest version: 1.5.1

# Installation

With `npm`:

```
npm install @rnacanvas/forms.open
```

# Usage

## `class OpenForm`

The Open form component.

The Open form primarily serves to inform the user
about how to open and save drawings in the RNAcanvas web app.

```javascript
// can be imported as a named import
import { OpenForm } from '@rnacanvas/forms.open';

// create a new Open form instance
var openForm = new OpenForm();

// the DOM node corresponding to the Open form
openForm.domNode;

// add the Open form to the document body
// (the Open form has absolute positioning by default)
document.body.append(openForm.domNode);
```
npm package: @rnacanvas/key-bindings
Description: Bind keys
Author: pzhaojohnson
Latest version: 1.1.1

# Installation

With `npm`:

```
npm install @rnacanvas/key-bindings
```

# Usage

All exports of this package can be accessed as named imports.

```javascript
// an example import
import { KeyBinding } from '@rnacanvas/key-bindings';
```

## `class KeyBinding`

The `KeyBinding` class represents a key binding.

```javascript
var selectAll = () => {};

var keyBinding = new KeyBinding('A', () => selectAll(), { ctrlKey: true });

// bind the key binding to the entire webpage
keyBinding.owner = document.body;
```

Key bindings are not case-sensitive.
The above key binding will be triggered for both `Ctrl+A` and `Ctrl+a`.

Modifying key combinations are exclusive, however.
The above key binding will not be triggered by `Ctrl+Shift+A`, for instance.

### `owner`

Key bindings don't become active until their `owner` property is set,
which stores a reference to the element that the key binding belongs to.

Setting the `owner` property of a key binding to the document body, for instance,
will bind the key binding to the entire webpage.

```javascript
// bind the key binding to the entire webpage
keyBinding.owner = document.body;

// deactivate the key binding
keyBinding.owner = undefined;
```

Key bindings can only possibly be triggered when their owner element has focus
and is the target of the appropriate keyboard events.

Any element can be made focusable using the `tabindex` HTML property
(see the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) to learn more).

<b>Note that the</b> `tabindex` <b>property is often disabled by default in Safari.</b>

```javascript
// not focusable by default
var ele = document.createElement('div');

// make the element focusable
ele.tabIndex = 0;

keyBinding.owner = ele;
```
npm package: @rnacanvas/specs
Description: Drawing specifications
Author: pzhaojohnson
Latest version: 1.2.0

# Installation

With `npm`:

```
npm install @rnacanvas/specs
```

# Usage

All exports of this package can be accessed as named imports.

```javascript
// an example import
import { Spec } from '@rnacanvas/specs';
```

## `class Spec`

A specification for a drawing.
npm package: @rnacanvas/toolbar
Description: The Toolbar
Author: pzhaojohnson
Latest version: 21.0.2

# Installation

With `npm`:

```
npm install @rnacanvas/toolbar
```

# Usage

All exports of this package can be accessed as named imports.

```javascript
// some example imports
import { Toolbar, ToolbarToggle } from '@rnacanvas/toolbar';
```

## `Toolbar`

The `Toolbar` class represents the toolbar for the RNAcanvas app.

The toolbar can be repositioned and hidden/unhidden.

```javascript
app; // the RNAcanvas app object

// return the toolbar to its original position
// (before any dragging with the mouse)
app.toolbar.reposition();

app.toolbar.hide();
app.toolbar.isHidden(); // true

app.toolbar.unhide();
app.toolbar.isHidden(); // false
```

The displacement of the toolbar from its original position can also be directly accessed,
though its properties are not currently settable.

```javascript
// X and Y components
app.toolbar.displacement.x;
app.toolbar.displacement.y;

// magnitude and direction angle (in radians)
app.toolbar.displacement.magnitude;
app.toolbar.displacement.direction;
```

## `ToolbarToggle`

The `ToolbarToggle` class represents the toolbar toggle for the RNAcanvas app,
which is used to reposition and hide/unhide the toolbar.

```javascript
app; // the RNAcanvas app object

// reposition and/or hide/unhide the toolbar
app.toolbarToggle.press();
```

The toolbar toggle itself can also be hidden and unhidden.

```javascript
app.toolbarToggle.hide();
app.toolbarToggle.isHidden(); // true

app.toolbarToggle.unhide();
app.toolbarToggle.isHidden(); // false
```