[WIP] Feature: form components

[jvhoven]

Introduces form components, continues from #46.

[jvhoven]

	Messages
📖	👍 Jest tests passed: 294/294 (0 skipped)

react-test-renderer

Author: Unknown

Description: React package for snapshot testing.

Homepage: https://reactjs.org/

Created	over 3 years ago
Last Updated	21 days ago
License	MIT
Maintainers	10
Releases	133
Direct Dependencies	object-assign, prop-types, react-is and scheduler
Keywords	react, react-native and react-testing

README

react-test-renderer

This package provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

Essentially, this package makes it easy to grab a snapshot of the "DOM tree" rendered by a React DOM or React Native component without using a browser or jsdom.

Documentation:

https://reactjs.org/docs/test-renderer.html

Usage:

const ReactTestRenderer = require('react-test-renderer');

const renderer = ReactTestRenderer.create(
  <Link page="https://www.facebook.com/">Facebook</Link>
);

console.log(renderer.toJSON());
// { type: 'a',
//   props: { href: 'https://www.facebook.com/' },
//   children: [ 'Facebook' ] }

You can also use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: https://facebook.github.io/jest/blog/2016/07/27/jest-14.html.

@types/react-bootstrap-typeahead

Author: Unknown

Description: TypeScript definitions for react-bootstrap-typeahead

Homepage: http://npmjs.com/package/@types/react-bootstrap-typeahead

Created	over 1 year ago
Last Updated	3 months ago
License	MIT
Maintainers	1
Releases	12
Direct Dependencies	@types/react

README

Installation

npm install --save @types/react-bootstrap-typeahead

Summary

This package contains type definitions for react-bootstrap-typeahead ( https://github.com/ericgio/react-bootstrap-typeahead ).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-bootstrap-typeahead

Additional Details

• Last updated: Fri, 26 Apr 2019 02:24:58 GMT
• Dependencies: @types/react
• Global values: none

Credits

These definitions were written by Guymestef https://github.com/Guymestef, Rajab Shakirov https://github.com/radziksh, Paito Anderson https://github.com/PaitoAnderson, Andreas Richter https://github.com/arichter83, Dale Fenton https://github.com/dalevfenton, Håkon Holhjem https://github.com/KngHawkon.

@types/react-avatar-editor

Author: Unknown

Description: TypeScript definitions for react-avatar-editor

Homepage: http://npmjs.com/package/@types/react-avatar-editor

Created	over 1 year ago
Last Updated	3 months ago
License	MIT
Maintainers	1
Releases	5
Direct Dependencies	@types/react

README

Installation

npm install --save @types/react-avatar-editor

Summary

This package contains type definitions for react-avatar-editor ( https://github.com/mosch/react-avatar-editor ).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-avatar-editor

Additional Details

• Last updated: Mon, 25 Feb 2019 23:34:53 GMT
• Dependencies: @types/react
• Global values: none

Credits

These definitions were written by Diogo Corrêa https://github.com/diogocorrea, Gabriel Prates https://github.com/gabsprates, Laurent Senta https://github.com/lsenta, David Spiess https://github.com/davidspiess.

@types/lodash

Author: Unknown

Description: TypeScript definitions for Lo-Dash

Homepage: http://npmjs.com/package/@types/lodash

Created	over 3 years ago
Last Updated	3 days ago
License	MIT
Maintainers	1
Releases	126
Direct Dependencies

README

Installation

npm install --save @types/lodash

Summary

This package contains type definitions for Lo-Dash (https://lodash.com).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/lodash

Additional Details

• Last updated: Tue, 27 Aug 2019 18:16:35 GMT
• Dependencies: none
• Global values: _

Credits

These definitions were written by Brian Zengel https://github.com/bczengel, Ilya Mochalov https://github.com/chrootsu, Stepan Mikhaylyuk https://github.com/stepancar, AJ Richardson https://github.com/aj-r, e-cloud https://github.com/e-cloud, Georgii Dolzhykov https://github.com/thorn0, Jack Moore https://github.com/jtmthf, Dominique Rau https://github.com/DomiR, and William Chelman https://github.com/WilliamChelman.

react-textarea-autosize

Author: Andrey Popp

Description: textarea component for React which grows with content

Homepage: https://github.com/andreypopp/react-textarea-autosize#readme

Created	about 6 years ago
Last Updated	8 months ago
License	MIT
Maintainers	4
Releases	80
Direct Dependencies	@babel/runtime and prop-types
Keywords	autosize, grow, react, react-component and textarea

README

react-textarea-autosize

Drop-in replacement for the textarea component which automatically resizes
textarea as content changes. A native React version of the popular
jQuery Autosize! Weighs
1.65KB (minified & gzipped).

This module supports IE9 and above.

import Textarea from 'react-textarea-autosize';

// If you use CommonJS syntax:
// var Textarea = require('react-textarea-autosize').default;

React.renderComponent(
  <div>
    <Textarea />
  </div>,
  document.getElementById('element')
);

Install

npm install react-textarea-autosize

Demo

https://andreypopp.github.io/react-textarea-autosize/

Props

Special props:

prop	type	description
inputRef	func	Function invoked with DOM node as argument. Default: () => {}
maxRows	number	Maximum number of rows upto which the textarea can grow
minRows	number	Minimum number of rows to show for textarea
onHeightChange	func	Function invoked on textarea height change, with height as first argument and React component instance (this) as second. Default: () => {}
useCacheForDOMMeasurements	boolean	Use object cache when computing height of textarea. Default: false

Apart from these, the component accepts all props that are accepted by <textarea/>, like style, onChange, value, etc.

FAQ

How to focus

Get a ref to inner textarea:

<Textarea inputRef={tag => (this.textarea = tag)} />

And then call a focus on that ref:

this.textarea.focus();

To autofocus:

<Textarea autoFocus />

(all HTML attributes are passed to inner textarea)

How to test it with jest and react-test-renderer if you need ref

Because jest provides polyfills for DOM
objects by requiring jsdom and
react-test-renderer doesn't
provide refs for rendered components out of the box (calling ref callbacks with
null), you need to supply a mocked ref in your tests in you need it for your tests.
You can do it like this (more can be read
here):

const tree = renderer
  .create(<Textarea />, {
    createNodeMock: () => document.createElement('textarea')
  })
  .toJSON();

Development

To release patch, minor or major version:

% npm run release:patch
% npm run release:minor
% npm run release:major

This will run eslint, compile sources from src/ to dist/, bump a version in
package.json and then create a new git commit with tag. If tests or linter
fails — commit won't be created. If tasks succeed it publishes to npm and pushes
a tag to github.

react-text-mask

Author: M.K. Safi

Description: React input component that accepts mask pattern

Homepage: https://github.com/text-mask/text-mask/tree/master/react/#readme

Created	over 3 years ago
Last Updated	about 1 year ago
License	Unlicense
Maintainers	3
Releases	48
Direct Dependencies	prop-types
Keywords	react, react-component, text mask, input mask, string mask, input formatting, text formatting and string formatting

README

React Input Mask

Getting started

First, install it.

npm i react-text-mask --save

Then, require it and use it.

import React from 'react'
import MaskedInput from 'react-text-mask'

export default () => (
  <div>
    <MaskedInput
      mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
    />
  </div>
)

<MaskedInput/> is fully compatible with <input/> element. So, you can
pass it CSS classes, a placeholder attribute, or even an onBlur handler.

For example, the following works:

<MaskedInput
  mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
  className="form-control"
  placeholder="Enter a phone number"
  guide={false}
  id="my-input-id"
  onBlur={() => {}}
  onChange={() => {}}
/>

Documentation

For more information about the props that you can pass to the component, see
the documentation here.

Example

To see an example of the code running, follow these steps:

1. Clone the repo, git clone git@github.com:text-mask/text-mask.git
2. cd text-mask
3. npm install
4. npm run react:dev
5. Open http://localhost:3000

The code of the example is in react/example.

Customize Rendered <input> Component

For advanced uses, you can customize the rendering of the resultant <input> via a render prop.
This is entirely optional, if no render prop is passed, a normal <input> is rendered.

For example, to use with styled-components,
which requires an innerRef:

<MaskedInput
  mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
  placeholder="Enter a phone number"
  id="my-input-id"
  render={(ref, props) => (
    <MyStyledInput innerRef={ref} {...props} />
  )}
/>

const MyStyledInput = styled.input`
  background: papayawhip;
`;

Contributing

We would love some contributions! Check out this document to get started.

react-quill

Author: zenoamaro

Description: The Quill rich-text editor as a React component.

Homepage: https://github.com/zenoamaro/react-quill

Created	almost 5 years ago
Last Updated	8 months ago
License	MIT
Maintainers	2
Releases	41
Direct Dependencies	@types/quill, @types/react, create-react-class, lodash, prop-types, quill and react-dom-factories
Keywords	react, react-component, rich, text, rich-text, textarea and quill

This README is too long to show.

react-i18next

Author: Jan Mühlemann

Description: Internationalization for react done right. Using the i18next i18n ecosystem.

Homepage: https://github.com/i18next/react-i18next

Created	over 3 years ago
Last Updated	17 days ago
License	MIT
Maintainers	2
Releases	176
Direct Dependencies	@babel/runtime and html-parse-stringify2
Keywords	i18next, internationalization, i18n, translation, localization, l10n, globalization, react and reactjs

README

react-i18next

IMPORTANT:

Master Branch is the new v10 using hooks.

$ v10.0.0
npm i react-i18next

react-native: not yet supports hooks (hooks are part of react-native v0.59.0)!!!

For the legacy version please use the v9.x.x Branch

$ v9.0.10 (legacy)
npm i react-i18next@legacy

Documentation

The documentation is published on react.i18next.com

What will my code look like?

Before: Your react code would have looked something like:

...
<div>Just simple content</div>
<div>
  Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...

After: With the trans component just change it to:

...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...

Head over to the interactive playground at codesandbox.

📖 What others say

• I18n with React and i18next via Alligator.io by Danny Hurlburt
• Ultimate Localization of React (Mobx) App with i18next via itnext.io by Viktor Shevchenko
• Internationalization for react done right Using the i18next i18n ecosystem via reactjsexample.com
• Using i18next to translate React.js application via codetain.co by Kasia Dadek
• Building i18n with Gatsby via gatsbyjs.org by Samuel Goudie
• Get your react.js application translated with style by Jan Mühlemann
• Translate your expo.io / react-native mobile application by Jan Mühlemann
• you're welcome to share your story...

Why i18next?

• Simplicity: no need to change your webpack configuration or adding additional babel transpilers, just use create-react-app and go
• Production ready we know there are more needs for production than just doing i18n on the clientside. So we offer wider support on serverside too (nodejs, php, ruby, .net, ...). Learn once - translate everywhere.
• Beyond i18n comes with locize bridging the gap between developement and translations - covering the whole translation process.

Localization workflow

Want to learn more about how seamless your internationalization and translation process can be?

watch the video

Installation

Source can be loaded via npm or downloaded from this repo.

# npm package
$ npm install react-i18next

• If you don't use a module loader it will be added to window.reactI18next

Examples

• Example react

v9 samples

• Example react
• Example preact
• Example react-native
• Example expo.io
• Example next.js
• Example razzle
• Example hashbase / beaker browser
• Example storybook
• Example locize.com
• Example test with jest

Requirements

• react >= 16.8.0
• react-dom >= 16.8.0
• react-native >= 0.59.0
• i18next >= 10.0.0 (typescript users: >=17.0.9)

v9

• react >= 0.14.0 (in case of < v16 or preact you will need to define parent in Trans component or globally in i18next.react options)
• i18next >= 2.0.0

Core Contributors

Thanks goes to these wonderful people (emoji key):

Jan Mühlemann 💻 💡 📖 💬	Adriano Raiano 💻 💡 📖 💬	Isaac Hinman 💻 💡 💬	Kevin Ross 💬 💻	Matheus Schettino 💻 💬

This project follows the all-contributors specification. Contributions of any kind welcome!

---

Gold Sponsors

---

localization as a service - locize.com

Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!

With using locize you directly support the future of i18next and react-i18next.

---

react-final-form

Author: Erik Rasmussen

Description: 🏁 High performance subscription-based form state management for React

Homepage: https://github.com/final-form/react-final-form#readme

Created	about 2 years ago
Last Updated	14 days ago
License	MIT
Maintainers	1
Releases	60
Direct Dependencies	@babel/runtime and ts-essentials

This README is too long to show.

react-display-name

Author: jurassix

Description: utility to return a react components display name

Homepage: https://github.com/jurassix/react-display-name#readme

Created	almost 4 years ago
Last Updated	over 1 year ago
License	MIT
Maintainers	1
Releases	5
Keywords	react, redux and getDisplayName

README

npm install --save react-display-name

Get the displayName from a Component. This is a common pattern with React Higher Order Components (HoCs). This is a simple reusable utility to get the name of a component.

Usage:

import {expect} from 'chai';
import React, {Component} from 'react';
import getDisplayName from 'react-display-name';

const container = (WrappedComponent) => {
  class Container extends Component {
    static displayName = `Container(${getDisplayName(WrappedComponent)})`;
    render() {
      return (
        <WrappedComponent />
      );
    }
  }
  return Container;
}

class HelloWorld extends Component {
  render() {
    return (
      <div>Hello</div>
    );
  }
}

const HelloWorldPrime = container(HelloWorld);

expect(getDisplayName(HelloWorldPrime)).to.equal('Container(HelloWorld)');
expect(HelloWorldPrime.displayName).to.equal('Container(HelloWorld)');

react-datetime

Author: Javier Marquez

Description: A lightweight but complete datetime picker React.js component

Homepage: https://github.com/YouCanBookMe/react-datetime

Created	about 4 years ago
Last Updated	5 months ago
License	MIT
Maintainers	3
Releases	71
Direct Dependencies	create-react-class, object-assign, prop-types and react-onclickoutside
Keywords	react, react-component, datepicker, timepicker, datetimepicker and datetime

react-bootstrap-typeahead

Author: ericgio

Description: React typeahead with Bootstrap styling

Homepage: http://npmjs.com/package/react-bootstrap-typeahead

Created	over 3 years ago
Last Updated	about 2 months ago
License	MIT
Maintainers	1
Releases	123
Direct Dependencies	classnames, create-react-context, escape-string-regexp, invariant, lodash, prop-types, prop-types-extra, react-overlays, react-popper and warning
Keywords	auto complete, auto suggest, auto-complete, auto-suggest, autocomplete, autosuggest, bootstrap, bootstrap tokenizer, bootstrap typeahead, bootstrap-tokenizer, bootstrap-typeahead, react, react autocomplete, react autosuggest, react tokenizer, react typeahead, react-autocomplete, react-autosuggest, react-bootstrap, react-bootstrap-tokenizer, react-bootstrap-typeahead, react-tokenizer, react-typeahead, tokenizer and typeahead

README

React Bootstrap Typeahead

A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js. It supports both single- and multi-selection and is compliant with WAI-ARIA authoring practices. Try the live examples.

Please note that documentation and examples apply to the most recent release and may no longer be applicable if you're using an outdated version.

Installation

npm install --save react-bootstrap-typeahead

or

yarn add react-bootstrap-typeahead

Include the module in your project:

import {Typeahead} from 'react-bootstrap-typeahead'; // ES2015
var Typeahead = require('react-bootstrap-typeahead').Typeahead; // CommonJS

UMD Build

Development and production builds are included in the NPM package. Alternatively, you can get them from CDNJS or unpkg.

Documentation

• Basic Usage
• Data
• Filtering
• Rendering
• Public Methods
• Props
• API
• Upgrade Guide

CSS

While the component relies primarily on Bootstrap for styles, some additional CSS is necessary for everything to behave correctly. You must include the provided CSS file in your project:

// Import as a module in your JS
import 'react-bootstrap-typeahead/css/Typeahead.css';

or

<!-- Link as a stylesheet in your HTML -->
<link rel="stylesheet" href="https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css">

Bootstrap 4

In an effort to fully support Bootstrap 4, this package also contains a CSS file named Typeahead-bs4.css that should be included alongside the base CSS file above.

Examples

Try the live examples, which also include code samples. If you'd like to modify the examples, clone the repository and run npm install and npm start to build the example file. You can then open the HTML file locally in your browser.

Browser Support

Recent versions of the following browsers are supported:

• Chrome
• Firefox
• IE (>=11)
• Safari

Special thanks to BrowserStack for providing cross-browser testing support.

License

MIT

react-avatar-editor

Author: Moritz Schwoerer

Description: Avatar / profile picture component. Resize and crop your uploaded image using a intuitive user interface.

Homepage: https://github.com/mosch/react-avatar-editor#readme

Created	over 4 years ago
Last Updated	5 months ago
License	MIT
Maintainers	2
Releases	59
Direct Dependencies	prop-types
Keywords	react-component, reactjs, react, canvas, avatar, editor, profile and image

This README is too long to show.

pica

Author: Unknown

Description: High quality image resize in browser.

Homepage: https://github.com/nodeca/pica

Created	almost 5 years ago
Last Updated	about 2 months ago
License	MIT
Maintainers	1
Releases	36
Direct Dependencies	inherits, multimath, object-assign and webworkify
Keywords	resize, scale, image, lanczos and canvas

README

pica - high quality image resize in browser

Resize images in browser without pixelation and reasonably fast.
Autoselect the best of available technologies: webworkers,
webassembly, createImageBitmap, pure JS.

demo

With pica you can:

• Reduce upload size for large images, saving upload time.
• Saves server resources on image processing.
• Generate thumbnails in browser.
• ...

Note. Old browsers may need Promise polyfill to work.
For example, lie.

Prior to use

Here is a short list of problems you can face:

• Loading image:
  • Due to JS security restrictions, you can process images
    from the same domain or local files only. If you load images from
    remote domain use proper Access-Control-Allow-Origin header.
  • iOS has resource limits for canvas size & image size.
    Look here
    for details and possible solutions.
  • If you plan to show images on screen after load, you should parse
    exif header to get proper orientation. Images can be rotated.
• Saving image:
  • Some ancient browsers do not support canvas.toBlob() method.
    Use pica.toBlob(), it includes required shim.
  • It's a good idea to keep exif data, to avoid rotation info loss.
    The most simple way is to cut original header and glue it to
    resized result. Look here
    for examples.
• Quality
  • JS canvas does not support access to info about gamma correction.
    Bitmaps have 8 bits per channel. That causes some quality loss,
    because with gamma correction precision could be 12 bits per
    channel.
  • Precision loss will not be noticeable for ordinary images like
    kittens, selfies and so on. But we don't recommend this library
    for resizing professional quality images.

Install

node.js (to develop, build via browserify and so on):

npm install pica

Transforms plugins for build via browserify:

npm install babelify @babel/core @babel/preset-env

bower:

bower install pica

Attention!. Compiled files are in /dist folder! If you wish to
load module in node.js style as require('pica') - your project MUST
be compiled with browserify
to properly use Web Workers. In other case - use require('pica/dist/pica').

Webpack notice

If you use Webpack to bundle your application, you probably need to define a resolve
alias into your webpack config, like this:

{
  resolve: {
    alias: {
      // Use compiled pica files from /dist folder
      pica: 'pica/dist/pica.js',
    },
  }
}

After that, you will be able to use pica as usual:

import Pica from 'pica';
const pica = Pica();
pica.resize(img, canvas).then(...);

Use

const pica = require('pica')();

// Resize from Canvas/Image to another Canvas
pica.resize(from, to, {
  unsharpAmount: 80,
  unsharpRadius: 0.6,
  unsharpThreshold: 2
})
.then(result => console.log('resize done!'));

// Resize & convert to blob
pica.resize(from, to)
  .then(result => pica.toBlob(result, 'image/jpeg', 0.90))
  .then(blob => console.log('resized to canvas & created blob!'));

API

new Pica(config)

Create resizer instance with given config (optional):

• tile - tile width/height. Images are processed by regions,
  to restrict peak memory use. Default 1024.
• features - list of features to use. Default is
  [ 'js', 'wasm', 'ww' ]. Can be [ 'js', 'wasm', 'cib', 'ww' ]
  or [ 'all' ]. Note, resize via createImageBitmap() ('cib')
  disabled by default due problems with quality.
• idle - cache timeout, ms. Webworkers create is not fast.
  This option allow reuse webworkers effectively. Default 2000.
• concurrency - max webworkers pool size. Default is autodetected
  CPU count, but not more than 4.

Important! Latest browsers may support resize via createImageBitmap.
You can try this feature by enabling chrome://flags/#enable-experimental-canvas-features
in Chrome AND enabling cib in pica options:

const pica = require('pica')({ features: [ 'js', 'wasm', 'ww', 'cib' ] });

But, as you can see in demo, result is still pixelated. So:

• createImageBitmap() is used for non-blocking image decode (when available)
• It's resize feature is blocked by default pica config. Enable it only on your
  own risk. Result with enabled cib will depend on your browser. Result
  without cib will be predictable and good.

.resize(from, to, options) -> Promise

Resize image from one canvas (or image) to another. Sizes are
taken from source and destination objects.

• from - source canvas or image.
• to - destination canvas, its size is supposed to be non-zero.
• options - quality (number) or object:
  • quality - 0..3. Default = 3 (lanczos, win=3).
  • alpha - use alpha channel. Default = false.
  • unsharpAmount - >=0, in percents. Default = 0 (off). Usually
    between 50 to 100 is good.
  • unsharpRadius - 0.5..2.0. By default it's not set. Radius of Gaussian
    blur. If it is less than 0.5, Unsharp Mask is off. Big values are clamped
    to 2.0.
  • unsharpThreshold - 0..255. Default = 0. Threshold for
    applying unsharp mask.
  • cancelToken - Promise instance. If defined, current
    operation will be terminated on rejection.

Result is Promise, resolved with to on success.

(!) If you need to process multiple images, do it
sequentially to optimize CPU & memory use. Pica already knows
how to use multiple cores (if browser allows).

.toBlob(canvas, mimeType [, quality]) -> Promise

Convenience method, similar to canvas.toBlob(), but with
promise interface & polyfill for old browsers.

.resizeBuffer(options) -> Promise

Supplementary method, not recommended for direct use. Resize
Uint8Array with raw RGBA bitmap (don't confuse with
jpeg / png / ... binaries). It does not use tiles & webworkers.
Left for special cases when you really need to process raw
binary data (for example, if you decode jpeg files "manually").

• options:
  • src - Uint8Array with source data.
  • width - src image width.
  • height - src image height.
  • toWidth - output width, >=0, in pixels.
  • toHeigh - output height, >=0, in pixels.
  • quality - 0..3. Default = 3 (lanczos, win=3).
  • alpha - use alpha channel. Default = false.
  • unsharpAmount - >=0, in percents. Default = 0 (off).
    Usually between 50 to 100 is good.
  • unsharpRadius - 0.5..2.0. Radius of Gaussian blur.
    If it is less than 0.5, Unsharp Mask is off. Big values are
    clamped to 2.0.
  • unsharpThreshold - 0..255. Default = 0. Threshold
    for applying unsharp mask.
  • dest - Optional. Output buffer to write data,
    if you don't wish pica to create new one.

Result is Promise, resolved with resized rgba buffer.

What is "quality"

Pica has presets to adjust speed/quality ratio.
Simply use quality option param:

• 0 - Box filter, window 0.5px
• 1 - Hamming filter, window 1.0px
• 2 - Lanczos filter, window 2.0px
• 3 - Lanczos filter, window 3.0px

In real world you will never need to change default (max)
quality. All this variations were implemented to better
understand resize math :)

Unsharp mask

Ifter scale down image can look a bit blured. It's good idea to sharpen it
a bit. Pica has built-in "unsharp mask" filter (off by default).
Set unsharpAmount to positive number to activate the filter.

Filter's parameters are similar to ones from Photoshop.
We recommend to start with unsharpAmount = 80,
unsharpRadius = 0.6 and unsharpThreshold = 2.
There is a correspondence between UnsharpMask parameters
in popular graphics software.

Browser support

We didn't have time to test all possible combinations, but in general:

• Top level API should work in all browsers,
  supporting canvas
  and typed arrays.
• Webworkers,
  WebAssembly and
  createImageBitmap
  are not required, but they will be used if available.
• If you plan to use only pure math core,
  then typed arrays support will be enough.

Note. Though you can run this package on node.js, browsers
are the main target platform. On server side we recommend to use
sharp.

References

You can find these links useful:

• discussions on stackoverflow:
  1,
  2,
  3.
• chromium skia sources:
  image_operations.cc,
  convolver.cc.

Authors

• Vitaly Puzrin @puzrin
• Alexander Rodin @a-rodin
• Loïc Faure-Lacroix @llacroix

Licence

MIT

moment

Author: Iskren Ivov Chernev

Description: Parse, validate, manipulate, and display dates

Homepage: http://momentjs.com

Created	almost 8 years ago
Last Updated	3 months ago
License	MIT
Maintainers	5
Releases	62
Keywords	moment, date, time, parse, format, validate, i18n, l10n and ender

README

A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.

Documentation

Port to ECMAScript 6 (version 2.10.0)

Moment 2.10.0 does not bring any new features, but the code is now written in
ECMAScript 6 modules and placed inside src/. Previously moment.js, locale/*.js and
test/moment/*.js, test/locale/*.js contained the source of the project. Now
the source is in src/, temporary build (ECMAScript 5) files are placed under
build/umd/ (for running tests during development), and the moment.js and
locale/*.js files are updated only on release.

If you want to use a particular revision of the code, make sure to run
grunt transpile update-index, so moment.js and locales/*.js are synced
with src/*. We might place that in a commit hook in the future.

Upgrading to 2.0.0

There are a number of small backwards incompatible changes with version 2.0.0. See the full descriptions here

• Changed language ordinal method to return the number + ordinal instead of just the ordinal.

• Changed two digit year parsing cutoff to match strptime.

• Removed moment#sod and moment#eod in favor of moment#startOf and moment#endOf.

• Removed moment.humanizeDuration() in favor of moment.duration().humanize().

• Removed the lang data objects from the top level namespace.

• Duplicate Date passed to moment() instead of referencing it.

Changelog

Contributing

We're looking for co-maintainers! If you want to become a master of time please
write to ichernev.

In addition to contributing code, you can help to triage issues. This can include reproducing bug reports, or asking for vital information such as version numbers or reproduction instructions. If you would like to start triaging issues, one easy way to get started is to subscribe to moment/moment on CodeTriage.

License

Moment.js is freely distributable under the terms of the MIT license.

lodash

Author: John-David Dalton

Description: Lodash modular utilities.

Homepage: https://lodash.com/

Created	over 7 years ago
Last Updated	13 days ago
License	MIT
Maintainers	2
Releases	108
Keywords	modules, stdlib and util

README

lodash v4.17.15

The Lodash library exported as Node.js modules.

Installation

Using npm:

$ npm i -g npm
$ npm i --save lodash

In Node.js:

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');

// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');

// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

See the package source for more details.

Note:

Install n_ for Lodash use in the Node.js < 6 REPL.

Support

Tested in Chrome 74-75, Firefox 66-67, IE 11, Edge 18, Safari 11-12, & Node.js 8-12.

Automated browser & CI test runs are available.

final-form

Author: Erik Rasmussen

Description: 🏁 Framework agnostic, high performance, subscription-based form state management

Homepage: https://github.com/final-form/final-form#readme

Created	about 2 years ago
Last Updated	15 days ago
License	MIT
Maintainers	1
Releases	63
Direct Dependencies	@babel/runtime

README

💰 Hey there! Do you fancy yourself a javascript expert? Take this quiz and get offers from top tech companies! 💰

---

🏁 Final Form

✅ Zero dependencies *

✅ Framework agnostic

✅ Opt-in subscriptions - only update on the state you need!

✅ 💥 5.1k gzipped 💥

---

💬 Give Feedback on Final Form 💬

In the interest of making 🏁 Final Form the best library it can be, we'd love your thoughts and feedback.

Take a quick survey.

---

Get Started

Philosophy

Examples

API

Companion Libraries

Who's using Final Form?

@42.nl/react-error-store

Author: Maarten Hus

Description: Storing errors and listening to their changes.

Homepage: https://github.com/42BV/react-error-store#readme

Created	about 2 months ago
Last Updated	about 2 months ago
License	ISC
Maintainers	3
Releases	1
Direct Dependencies	lodash.get and lodash.set
Keywords	Error and React

README

About

Storing errors and listening to their changes.

Installation

npm install @42.nl/react-error-store --save

Documentation

See the documentation.

@42.nl/jarb-final-form

Author: Maarten Hus

Description: Validating forms through JaRB.

Homepage: https://github.com/42BV/jarb-final-form#readme

Created	24 days ago
Last Updated	24 days ago
License	ISC
Maintainers	3
Releases	1
Keywords	JaRB, final-form and react-final-form

README

About

JaRB JaRB aims to improve database
usage in Java enterprise applications. With JaRB you can get the
validation rules from the database into Java. With this project
you can get those rules into your react-final-form powered
forms as well.

Installation

npm install @42.nl/jarb-final-form --save

Documentation

See the documentation

New dependencies added: @42.nl/jarb-final-form, @42.nl/react-error-store, final-form, lodash, moment, pica, react-avatar-editor, react-bootstrap-typeahead, react-datetime, react-display-name, react-final-form, react-i18next, react-quill, react-text-mask, react-textarea-autosize, @types/lodash, @types/react-avatar-editor, @types/react-bootstrap-typeahead and react-test-renderer.

Generated by 🚫 dangerJS against 4d53d74

[codecov]

Codecov Report

Merging #49 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff           @@
##           master    #49    +/-   ##
======================================
  Coverage     100%   100%            
======================================
  Files          19     45    +26     
  Lines         254   1127   +873     
  Branches       66    203   +137     
======================================
+ Hits          254   1127   +873

Impacted Files	Coverage Δ
src/core/Avatar/Avatar.tsx	100% <100%> (ø)	⬆️
src/form/Typeahead/utils.ts	100% <100%> (ø)
src/form/Input/Input.tsx	100% <100%> (ø)
src/form/Select/Select.tsx	100% <100%> (ø)
src/form/ImageUpload/ImageUpload.tsx	100% <100%> (ø)
src/form/Input/Addon/Addon.tsx	100% <100%> (ø)
src/form/Input/Addon/useButtonColor.ts	100% <100%> (ø)
src/form/ImageUpload/utils.ts	100% <100%> (ø)
src/form/Typeahead/multiple/TypeaheadMultiple.tsx	100% <100%> (ø)
src/form/DateTimeInput/DateTimeInput.tsx	100% <100%> (ø)
... and 45 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9c714ea...4d53d74. Read the comment docs.