# alphanym-js

> Alphanym name input field React component

Latest version **1.0.14** (published 2018-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install alphanym-js
pnpm add alphanym-js
yarn add alphanym-js
bun add alphanym-js
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2018-07-19 |
| First published | 2018-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 27.3 KB |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | alphanym |
| Keywords | react-component, alphanym |

## Links

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

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) 4.17.4
- [prop-types](https://npm.io/package/prop-types.md) 15.5.10
- [styled-components](https://npm.io/package/styled-components.md) 2.0.0
- [react-debounce-input](https://npm.io/package/react-debounce-input.md) ^3.2.0
- [react-onclickoutside](https://npm.io/package/react-onclickoutside.md) ^6.7.1

## Recent versions

- 1.0.14 (latest) — 2018-07-19
- 1.0.13 — 2018-06-26
- 1.0.12 — 2018-06-26
- 1.0.11 — 2018-06-25
- 1.0.10 — 2018-06-25
- 1.0.9 — 2018-06-25
- 1.0.8 — 2018-06-25
- 1.0.7 — 2018-06-25
- 1.0.6 — 2018-06-25
- 1.0.5 — 2018-06-25
- 1.0.4 — 2018-06-25
- 1.0.3 — 2018-06-25
- 1.0.2 — 2018-06-25
- 1.0.1 — 2018-06-25
- 1.0.0 — 2018-06-24

## README

# Alphanym.js

Alphanym.js is a React component library which helps improve your sign up page by replacing your first and last name form fields with a single universal Alphanym field.
 
This ensures you will always know the best way to refer to your customers, regardless of their name or nationality.

[Demo](https://www.alphanym.com/demo)

## Installation

`npm i alphanym-js`

## Integration

The [Alphanym Example App](https://github.com/Alphanym/alphanym-example-app) demonstrates a full-stack integration with the Alphanym service.

```jsx
...

<AlphanymField
 onQuery={ this.handleQuery }
 onComplete={ this.handleComplete }
 results={ queryResults }
 loading={ queryLoading }
 />

...
```

## Attributes 

#### onQuery
Callback triggered when the field should query the API. The callback is passed the raw name text as its first argument.

#### onComplete
Callback triggered when the field has been filled out. The callback is passed an object with `name` and `betanym` fields.

##### Example JSON
```json
{
  "version": "1.0.1",
  "name": "Charles Darwin",
  "betanym": "Charles"
};
```

#### results
The response object from the body of a successful query. This should default to an empty object when a query request hasn't been sent yet.   

#### loading
A Boolean value which plays the loading animation.

#### onFeedback (Optional)
Callback for sending feedback, when Alphanym interprets a name incorrectly. The callback is passed an object with `name` and `betanym` fields.

##### Example JSON
```json
{
  "version": "1.0.1",
  "name": "Charles Darwin",
  "betanym": "Charles"
};
```

#### font (Optional)
The CSS value used for the font.

#### debounceTimeout (Optional)
Milliseconds before the field automatically sends a query.

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