Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Feature: form components #49

Merged
merged 1 commit into from
Aug 30, 2019
Merged

[WIP] Feature: form components #49

merged 1 commit into from
Aug 30, 2019

Conversation

jvhoven
Copy link
Contributor

@jvhoven jvhoven commented Aug 30, 2019

Introduces form components, continues from #46.

@jvhoven
Copy link
Contributor Author

jvhoven commented Aug 30, 2019 •
edited
Loading

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

react-test-renderer

Author: Unknown

Description: React package for snapshot testing.

Homepage: https://reactjs.org/
Createdover 3 years ago
Last Updated21 days ago
LicenseMIT
Maintainers10
Releases133
Direct Dependenciesobject-assign, prop-types, react-is and scheduler
Keywordsreact, 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
Createdover 1 year ago
Last Updated3 months ago
LicenseMIT
Maintainers1
Releases12
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
Createdover 1 year ago
Last Updated3 months ago
LicenseMIT
Maintainers1
Releases5
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
Createdover 3 years ago
Last Updated3 days ago
LicenseMIT
Maintainers1
Releases126
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
Createdabout 6 years ago
Last Updated8 months ago
LicenseMIT
Maintainers4
Releases80
Direct Dependencies@babel/runtime and prop-types
Keywordsautosize, grow, react, react-component and textarea
README

npm version
npm

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
Createdover 3 years ago
Last Updatedabout 1 year ago
LicenseUnlicense
Maintainers3
Releases48
Direct Dependenciesprop-types
Keywordsreact, 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 [email protected]: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
Createdalmost 5 years ago
Last Updated8 months ago
LicenseMIT
Maintainers2
Releases41
Direct Dependencies@types/quill, @types/react, create-react-class, lodash, prop-types, quill and react-dom-factories
Keywordsreact, 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
Createdover 3 years ago
Last Updated17 days ago
LicenseMIT
Maintainers2
Releases176
Direct Dependencies@babel/runtime and html-parse-stringify2
Keywordsi18next, internationalization, i18n, translation, localization, l10n, globalization, react and reactjs
README

react-i18next Tweet

CircleCI
Code Climate
Coverage Status
Quality
dependencies
devdependencies

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

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.
i18next ecossystem

Localization workflow

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

video

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

v9 samples

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

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!

locize

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
Createdabout 2 years ago
Last Updated14 days ago
LicenseMIT
Maintainers1
Releases60
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
Createdalmost 4 years ago
Last Updatedover 1 year ago
LicenseMIT
Maintainers1
Releases5
Keywordsreact, 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
Createdabout 4 years ago
Last Updated5 months ago
LicenseMIT
Maintainers3
Releases71
Direct Dependenciescreate-react-class, object-assign, prop-types and react-onclickoutside
Keywordsreact, 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
Createdover 3 years ago
Last Updatedabout 2 months ago
LicenseMIT
Maintainers1
Releases123
Direct Dependenciesclassnames, create-react-context, escape-string-regexp, invariant, lodash, prop-types, prop-types-extra, react-overlays, react-popper and warning
Keywordsauto 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.

npm version
npm downloads
build status
cdnjs

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

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.

http://i.imgur.com/9aLP6Fx.png?1

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
Createdover 4 years ago
Last Updated5 months ago
LicenseMIT
Maintainers2
Releases59
Direct Dependenciesprop-types
Keywordsreact-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
Createdalmost 5 years ago
Last Updatedabout 2 months ago
LicenseMIT
Maintainers1
Releases36
Direct Dependenciesinherits, multimath, object-assign and webworkify
Keywordsresize, scale, image, lanczos and canvas
README

pica - high quality image resize in browser

Build Status
NPM version

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:

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:

Authors

Licence

MIT

moment

Author: Iskren Ivov Chernev

Description: Parse, validate, manipulate, and display dates

Homepage: http://momentjs.com
Createdalmost 8 years ago
Last Updated3 months ago
LicenseMIT
Maintainers5
Releases62
Keywordsmoment, date, time, parse, format, validate, i18n, l10n and ender
README

Join the chat at https://gitter.im/moment/moment

NPM version NPM downloads MIT License Build Status
Coverage Status
FOSSA Status
SemVer compatibility

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 Open Source Helpers

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.

FOSSA Status

lodash

Author: John-David Dalton

Description: Lodash modular utilities.

Homepage: https://lodash.com/
Createdover 7 years ago
Last Updated13 days ago
LicenseMIT
Maintainers2
Releases108
Keywordsmodules, 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
Createdabout 2 years ago
Last Updated15 days ago
LicenseMIT
Maintainers1
Releases63
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

Final Form

Backers on Open Collective
Sponsors on Open Collective
NPM Version
NPM Downloads
Build Status
codecov.io
styled with prettier

✅ 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
Createdabout 2 months ago
Last Updatedabout 2 months ago
LicenseISC
Maintainers3
Releases1
Direct Dependencieslodash.get and lodash.set
KeywordsError and React
README

About

Build Status
Codecov

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
Created24 days ago
Last Updated24 days ago
LicenseISC
Maintainers3
Releases1
KeywordsJaRB, final-form and react-final-form
README

About

Build Status
Codecov

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
Copy link

codecov bot commented Aug 30, 2019 •
edited
Loading

Codecov Report

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

Impacted file tree graph

@@          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.

@jvhoven jvhoven force-pushed the feature/form-components branch 2 times, most recently from bf04387 to ed41623 Compare August 30, 2019 13:15
@jvhoven jvhoven merged commit f55bf17 into master Aug 30, 2019
@jvhoven jvhoven deleted the feature/form-components branch August 30, 2019 13:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@jvhoven