@yaireo/tagify - npm Package Compare versions

Comparing version 2.15.1 to 2.15.2

package.json

		{
		"name": "@yaireo/tagify",
		"version": "2.15.1",
		"version": "2.15.2",
		"homepage": "https://github.com/yairEO/tagify",
		@@ -5,0 +5,0 @@ "description": "Convert an input field into a Tags element. Easy, customizable, with good performance and small code footprint.",

README.md

		@@ -0,1 +1,5 @@
		<a href='https://www.npmjs.com/package/@yaireo/tagify'>
		<img src="https://img.shields.io/npm/v/@yaireo/tagify.svg" />
		</a>

		[Tagify](https://yaireo.github.io/tagify) - lightweight input "tags" script
		@@ -89,3 +93,3 @@ ========

		### Adding tags dynamically
		## Adding tags dynamically

		@@ -102,3 +106,3 @@ ```javascript

		### output value
		## output value

		@@ -110,3 +114,3 @@ There are two possible ways to get the value of the tags:

		### Ajax whitelist
		## Ajax whitelist

		@@ -144,3 +148,3 @@ Dynamically-loaded suggestions list (whitelist) from the server (as the user types) is a frequent need to many.

		### Suggestions selectbox
		## Suggestions selectbox
		The suggestions selectbox is shown is a whitelist Array of Strings or Objects was passed in the settings when the Tagify instance was created.
		@@ -188,10 +192,9 @@ Suggestions list will only be rendered if there are at least two matching sugegstions (case-insensetive).
		```javascript
		whitelist = [
		{
		{ value:'Afghanistan', code:'AF', searchBy:'war zone' },
		}
		]
		whitelist = [
		{ value:'Afghanistan', code:'AF', searchBy:'war zone' },
		...
		]
		```

		### Edit tags
		## Edit tags
		Tags which aren't `read-only` can be edited by double-clicking them.
		@@ -202,68 +205,11 @@

		### React
		## React

		`react.tagify.js`
		A Tagify React component is exported as `<Tags>` from [`react.tagify.js`](https://github.com/yairEO/tagify/blob/master/dist/react.tagify.js):

		React component using the Tagify's Wrapper `<Tags>`:
		Check the [codepen demo](https://codepen.io/vsync/project/editor/ARaJye) for a live React integration example

		```javascript
		import { Tags } from '@yaireo/tagify/dist/react.tagify'

		// setup some basic Tagify settings object
		var tagifySettings = {
		blacklist : ["fuck", "shit"]
		}
		## Angular

		// Demo "App" component that is using the Tagify React component (<Tags/>)
		class App extends React.Component {
		constructor(props) {
		super(props);

		tagifySettings.callbacks = {
		add : this.onTagifyAdd,
		remove : this.onTagifyRemove,
		input : this.onTagifyInput,
		invalid : this.onTagifyInvalid
		}
		}

		componentDidMount(){}

		// callbacks for all of Tagify's events:
		onTagifyAdd = e => {
		console.log('added:', e.detail);
		}

		onTagifyRemove = e => {
		console.log('remove:', e.detail);
		}

		onTagifyInput = e => {
		console.log('input:', e.detail);
		}

		onTagifyInvalid = e => {
		console.log('invalid:', e.detail);
		}

		// Render <Textarea> element and applies Tagify on it
		render(){
		return (
		<Tags mode='textarea'
		autofocus={true}
		className='myInput'
		name='tags'
		settings={tagifySettings}
		initialValue='foo, bar, baz' />
		)
		}
		}

		ReactDOM.render(<App />, document.getElementById('app'))
		```

		[Live React Demo in Codepen](https://codepen.io/vsync/project/editor/44cc53af79bbede42efd7521d94d6f9f)

		### Angular

		TagifyComponent which will be used by your template as `<tagify>`
		@@ -322,3 +268,3 @@

		### jQuery version
		## jQuery version

		@@ -343,3 +289,3 @@ `jQuery.tagify.js`
		// get tags from the server (ajax) and add them:
		$('[name=tags]').data('tagify').addTag('aaa, bbb, ccc')
		$('[name=tags]').data('tagify').addTags('aaa, bbb, ccc')
		````
		@@ -346,0 +292,0 @@

src/tagify.js

		@@ -865,3 +865,3 @@ function Tagify( input, settings ){
		console.warn('[addTags]', 'no tags to add:', tagsItems)
		return;
		return tagElems;
		}
		@@ -868,0 +868,0 @@

@yaireo/tagify - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics