React.JS
made by https://0x3d.site
GitHub - yairEO/tagify: š lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vueš lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue - yairEO/tagify
Visit Site
GitHub - yairEO/tagify: š lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Table of Contents
- Table of Contents
- Installation
- Basic Usage Examples
- Features
- Building the project
- Adding tags dynamically
- Output value
- Ajax whitelist
- Persisted data
- Edit tags
- Validations
- Drag & Sort
- DOM Templates
- Suggestions list
- Mixed-Content
- Single-Value
- React
- Vue
- jQuery version
- HTML input & textarea attributes
- Caveats
- FAQ
- CSS Variables
- Methods
- Events
- Hooks
- Settings
Installation
Option 1 - import from CDN:
Place these lines before any other code which is (or will be) using Tagify (Example here)
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
Tagify
will then be available globally.
To load specific version use @
- for example: unpkg.com/@yaireo/[email protected]
option 2 - import as a Node module:
npm i @yaireo/tagify --save
Basic Usage Examples
- Many demos with code examples can be seen here
- CodeSandbox live demo
import Tagify from '@yaireo/tagify'
var inputElem = document.querySelector('input') // the 'input' element which will be transformed into a Tagify component
var tagify = new Tagify(inputElem, {
// A list of possible tags. This setting is optional if you want to allow
// any possible tag to be added without suggesting any to the user.
whitelist: ['foo', 'bar', 'and baz', 0, 1, 2]
})
The above example shows the most basic whitelist
array setting possible, with a mix
of Strings and Numbers but the array also support Objects whic a must-have property of value
:
whitelist: [{value: 'foo', id: '123', email: '[email protected]'}, ...]
The value
property is what will be used when actually defining the value
property of the original input element (inputElem
in the example above) which was transformed
into a Tagify component, and so when the form data is sent to the server, it will contain all the values (which are the selected tags in the component).
For selected tags to show a different text than what is defined in value
for a whitelist item, see the tagTextProp
setting
ā ļø Important:
Don't forget to include tagify.css
file in your project.
CSS location: @yaireo/tagify/dist/tagify.css
SCSS location: @yaireo/tagify/src/tagify.scss
See SCSS usecase & example
Debugging
There are several places in the source code which emits console.warn
logs to help identify issues.
Those will only work if Tagify.logger.enabled
flag is set to true
.
To disable the default logging, set the following global variable:
window.TAGIFY_DEBUG = false
var tagify = new Tagify(...)
Features
- Can be applied to input & textarea elements
- Supports mix content (text and tags together)
- Supports single-value mode (like
<select>
) - Supports whitelist/blacklist
- Customizable HTML templates for the different areas of the component (wrapper, tags, dropdown, dropdown item, dropdown header, dropdown footer)
- Shows suggestions list (flexiable settings & styling) at full (component) width or next to the typed texted (caret)
- Allows setting suggestions' aliases for easier fuzzy-searching
- Auto-suggest input as-you-type with the ability to auto-complete
- Can paste in multiple values:
tag 1, tag 2, tag 3
or even newline-separated tags - Tags can be created by Regex delimiter or by pressing the "Enter" key / focusing of the input
- Validate tags by Regex pattern or by function
- Tags may be editable (double-click)
- ARIA accessibility support(Component too generic for any meaningful ARIA)
- Supports read-only mode to the whole component or per-tag
- Each tag can have any properties desired (class, data-whatever, readonly...)
- Automatically disallow duplicate tags (vis "settings" object)
- Has built-in CSS loader, if needed (Ex. AJAX whitelist pulling)
- Tags can be trimmed via
hellip
by givingmax-width
to thetag
element in yourCSS
- RTL alignment (See demo)
- Internet Explorer - A polyfill script should be used:
tagify.polyfills.min.js
(in/dist
) (IE support has been dropped) - Many useful custom events
- Original input/textarea element values kept in sync with Tagify
Building the project
Simply run gulp
in your terminal, from the project's path (Gulp should be installed first).
Source files are this path: /src/
Output files, which are automatically generated using Gulp, are in: /dist/
Output files:
Filename | Info |
---|---|
tagify.esm.js |
ESM version. see jsbin demo |
tagify.js |
minified UMD version, including its souremaps. This is the main file the package exports. |
tagify.polyfills.min.js |
Used for old Internet Explorer browser support |
react.tagify.js |
Wrapper-only for React. Read more |
jQuery.tagify.min.js |
jQuery wrapper - same as tagify.js . Might be removed in the future. (Deprecaded as of APR 24') |
tagify.css |
Adding tags dynamically
var tagify = new Tagify(...);
tagify.addTags(["banana", "orange", "apple"])
// or add tags with pre-defined properties
tagify.addTags([{value:"banana", color:"yellow"}, {value:"apple", color:"red"}, {value:"watermelon", color:"green"}])
Output value
There are two possible ways to get the value of the tags:
- Access the tagify's instance's
value
prop:tagify.value
(Array of tags) - Access the original input's value:
inputElm.value
(Stringified Array of tags)
The most common way is to simply listen to the change
event on the original input
var inputElm = document.querySelector,
tagify = new Tagify (inputElm);
inputElm.addEventListener('change', onChange)
function onChange(e){
// outputs a String
console.log(e.target.value)
}
Modify original input value format
Default format is a JSON string:
'[{"value":"cat"}, {"value":"dog"}]'
I recommend keeping this because some situations might have values such as addresses (tags contain commas):
'[{"value":"Apt. 2A, Jacksonville, FL 39404"}, {"value":"Forrest Ray, 191-103 Integer Rd., Corona New Mexico"}]'
Another example for complex tags state might be disabled tags, or ones with custom identifier class:
(tags can be clicked, so delevopers can choose to use this to disable/enable tags)
'[{"value":"cat", "disabled":true}, {"value":"dog"}, {"value":"bird", "class":"color-green"}]'
To change the format, assuming your tags have no commas and are fairly simple:
var tagify = new Tagify(inputElm, {
originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
})
Output:
"cat,dog"
Ajax whitelist
Dynamically-loaded suggestions list (whitelist) from the server (as the user types) is a frequent need to many.
Tagify comes with its own loading animation, which is a very lightweight CSS-only code, and the loading
state is controlled by the method tagify.loading
which accepts true
or false
as arguments.
Below is a basic example using the fetch
API. I advise aborting the last request on any input before starting a new request.
var input = document.querySelector('input'),
tagify = new Tagify(input, {whitelist:[]}),
controller; // for aborting the call
// listen to any keystrokes which modify tagify's input
tagify.on('input', onInput)
function onInput( e ){
var value = e.detail.value
tagify.whitelist = null // reset the whitelist
// https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
controller && controller.abort()
controller = new AbortController()
// show loading animation.
tagify.loading(true)
fetch('http://get_suggestions.com?value=' + value, {signal:controller.signal})
.then(RES => RES.json())
.then(function(newWhitelist){
tagify.whitelist = newWhitelist // update whitelist Array in-place
tagify.loading(false).dropdown.show(value) // render the suggestions dropdown
})
}
Persisted data
Sometimes the whitelist might be loaded asynchronously, and so any pre-filled value in the original input field
will be removed if the enforceWhitelist
is set to true
.
Tagify can automatically restore the last used whitelist
by setting a unique id to the Tagify instance,
by using the localstorage to persist the whitelist
& value
data:
var input = document.querySelector('input'),
tagify = new Tagify(input, {
id: 'test1', // must be unique (per-tagify instance)
enforceWhitelist: true,
}),
Edit tags
Tags that aren't read-only
can be edited by double-clicking them (by default)
or by changing the editTags
setting to 1
, making tags editable by single-clicking them.
The value is saved on blur
or by pressing enter
key. Pressing Escape
will revert the change trigger blur
.
ctrlz will revert the change if an edited tag was marked as not valid (perhaps duplicate or blacklisted)
To prevent all tags from being allowed to be editable, set the editTags
setting to false
(or null
).
To do the same but for specific tag(s), set those tags' data with editable
property set to false
:
<input value='[{"value":"foo", "editable":false}, {"value":"bar"}]'>
Validations
For "regular" tags (not mix-mode or select-mode) the easiest way is to use the pattern
setting and use a Regex, or
apply the pattern
attribute directly on the input
which will be "transformed" into a Tagify component (for vanilla code where the input
tag is fully accessible to developers).
If the pattern
setting does not meet your needs, use the validate
setting, which recieves a tag data object as an argument and should return true
if validaiton is passing, or false
/string
of not.
A string may be returned as the reason of the validation failure so it would be printed as the title
attribute of the invalid tag.
Here's an example for async validation for an added tag. The idea is to listen to "add"
event,
and when it fires, first set the tag to "loading" state, run an async call, and then set the loading state (of the tag) back to false
.
If the custom async validation failed, call the replaceTag
Tagify method and set the __isValid
tag data property to the error string which will
be shown when hovering the tag.
Note - there is a setting to keep invalid tags (keepInvalidTags
) and if it's set to true
, the user can see the reason for the invalidation by
hovering the tag and see the browser's native tooltip via the title
attribute:
{
empty : "empty",
exceed : "number of tags exceeded",
pattern : "pattern mismatch",
duplicate : "already exists",
notAllowed : "not allowed"
}
The texts for those (invalid tags) titles can be customized from the settings:
new Tagify(inputElement, {
texts: {
duplicate: "Duplicates are not allowed"
}
})
Or by directly manipulating the Tagify function prototype:
Tagify.prototype.TEXTS = {...Tagify.prototype.TEXTS, {duplicate: "Duplicates are not allowed"}}
Drag & Sort
To be able to sort tags by dragging, a 3rd-party script is needed.
I have made a very simple drag & drop (~11kb
unminified) script which uses HTML5 native API and
it is available to download via NPM or Github
but any other drag & drop script may work. I could not find on the whole internet a decent lightweight script.
Integration example:
var tagify = new Tagify(inputElement)
// bind "DragSort" to Tagify's main element and tell
// it that all the items with the below "selector" are "draggable"
var dragsort = new DragSort(tagify.DOM.scope, {
selector: '.'+tagify.settings.classNames.tag,
callbacks: {
dragEnd: onDragEnd
}
})
// must update Tagify's value according to the re-ordered nodes in the DOM
function onDragEnd(elm){
tagify.updateValueByDOMTags()
}
DOM Templates
It's possible to control the templates for some of the HTML elements Tagify is using by
modifying the settings.templates
Object with your own custom functions which must return an HTML string.
Available templates are: wrapper
, input
, tag
, dropdown
, dropdownItem
, dropdownContent
, dropdownHeader
, dropdownFooter
and the optional dropdownItemNoMatch
which is a special template for rendering a suggestion item (in the dropdown list) only if there were no matches found for the typed input, for example:
// ...more tagify settings...
templates: {
dropdownItemNoMatch: data =>
`<div class='${tagify.settings.classNames.dropdownItem}' value="noMatch" tabindex="0" role="option">
No suggestion found for: <strong>${data.value}</strong>
</div>`
}
Example of overriding the tag
template:
Each template function is automatically binded with this
pointing to the current Tagify instance.
It is imperative to preserve the class names and also the this.getAttributes(tagData)
for proper functionality.
new Tagify(inputElem, {
templates: {
tag(tagData, tagify){
return `<tag title="${(tagData.title || tagData.value)}"
contenteditable='false'
spellcheck='false'
tabIndex="${this.settings.a11y.focusableTags ? 0 : -1}"
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
${this.getAttributes(tagData)}>
<x title='' class="${this.settings.classNames.tagX}" role='button' aria-label='remove tag'></x>
<div>
<span class="${this.settings.classNames.tagText}">${tagData[this.settings.tagTextProp] || tagData.value}</span>
</div>
</tag>`,
dropdownFooter(suggestions){
var hasMore = suggestions.length - this.settings.dropdown.maxItems;
return hasMore > 0
? `<footer data-selector='tagify-suggestions-footer' class="${this.settings.classNames.dropdownFooter}">
${hasMore} more items. Refine your search.
</footer>`
: '';
}
}
})
Suggestions list
The suggestions list is a whitelist Array of Strings or Objects which was set in the settings Object when the Tagify instance was created, and can be set later directly on the instance: tagifyInstance.whitelist = ["tag1", "tag2", ...]
.
The suggestions dropdown will be appended to the document's <body>
element and will be rendered by default in a position below (bottom of) the Tagify element.
Using the keyboard arrows up/down will highlight an option from the list, and hitting the Enter key to select.
It is possible to tweak the list dropdown via 2 settings:
enabled
- this is a numeral value that tells Tagify when to show the suggestions dropdown, when a minimum of N characters were typed.maxItems
- Limits the number of items the suggestions list will render
var input = document.querySelector('input'),
tagify = new Tagify(input, {
whitelist : ['aaa', 'aaab', 'aaabb', 'aaabc', 'aaabd', 'aaabe', 'aaac', 'aaacc'],
dropdown : {
classname : "color-blue",
enabled : 0, // show the dropdown immediately on focus
maxItems : 5,
position : "text", // place the dropdown near the typed text
closeOnSelect : false, // keep the dropdown open after selecting a suggestion
highlightFirst: true
}
});
<div class="tagify__dropdown tagify__dropdown--text" style="left:993.5px; top:106.375px; width:616px;">
<div class="tagify__dropdown__wrapper">
<div class="tagify__dropdown__item tagify__dropdown__item--active" value="aaab">aaab</div>
<div class="tagify__dropdown__item" value="aaabb">aaabb</div>
<div class="tagify__dropdown__item" value="aaabc">aaabc</div>
<div class="tagify__dropdown__item" value="aaabd">aaabd</div>
<div class="tagify__dropdown__item" value="aaabe">aaabe</div>
</div>
</div>
By default searching the suggestions is using fuzzy-search (see settings).
If you wish to assign alias to items (in your suggestion list), add the searchBy
property to whitelist items you wish
to have an alias for.
In the below example, typing a part of a string which is included in the searchBy
property, for example land midd"
-
the suggested item which matches the value "Israel" will be rendered in the suggestions (dropdown) list.
Example for a suggestion item alias
whitelist = [
...
{ value:'Israel', code:'IL', searchBy:'holy land, desert, middle east' },
...
]
Another handy setting is dropdown.searchKeys
which, like the above dropdown.searchBy
setting, allows
expanding the search of any typed terms to more than the value
property of the whitelist items (if items are a Collection).
Example whitelist:
[
{
value : 123456,
nickname : "foo",
email : "[email protected]"
},
{
value : 987654,
nickname : "bar",
email : "[email protected]"
},
...more..
]
Modified searchKeys
setting to also search in other keys:
{
dropdown: {
searchKeys: ["nickname", "email"] // fuzzy-search matching for those whitelist items' properties
}
}
Mixed-Content
This feature must be toggled using these settings:
{
// mixTagsInterpolator: ["{{", "}}"], // optional: interpolation before & after string
mode: 'mix', // <-- Enable mixed-content
pattern: /@|#/ // <-- Text starting with @ or # (if single, String can be used here instead of Regex)
}
When mixing text with tags, the original textarea (or input) element will have a value as follows:
[[cartman]]ā and [[kyle]]ā do not know [[Homer simpson]]ā
If the initial value of the textarea or input is formatted as the above example, Tagify will try to
automatically convert everything between [[
& ]]
to a tag, if tag exists in the whitelist, so make
sure when the Tagify instance is initialized, that it has tags with the correct value
property that match
the same values that appear between [[
& ]]
.
Applying the setting dropdown.position:"text"
is encouraged for mixed-content tags, because the suggestions list
weird when there is already a lot of content on multiple lines.
If a tag does not exist in the whitelist, it may be created by the user and all you should do is listen to the add
event and update your local/remote state.
Single-Value
Similar to native <Select>
element, but allows typing text as value.
React
See live demo for React integration examples. ā ļø Tagify is not a controlled component.
A none-minified and raw source-code Tagify React component is exported from react.tagify.jsx
and you can import it as seen in the below code example.
This React port will only work if your bundler can handle raw source-code in ES2015+ which is better for tree-shaking.
Update regarding onChange
prop:
I have changed how the onChange
works internally within the Wrapper of Tagify
so as of March 30, 2021 the e
argument will include a detail
parameter with the value as string.
There is no more e.target
, and to access the original DOM input element, do this: e.detail.tagify.DOM.originalInput
.
Note: You will need to import Tagify's CSS also, either by JavaScript or by SCSS
@import
(which is preferable) Also note that you will need to use dart-sass and not node-sass in order to compile the file.
import { useCallback, useRef } from 'react'
import Tags from '@yaireo/tagify/react' // React-wrapper file
import '@yaireo/tagify/dist/tagify.css' // Tagify CSS
const App = () => {
// on tag add/edit/remove
const onChange = useCallback((e) => {
console.log("CHANGED:"
, e.detail.tagify.value // Array where each tag includes tagify's (needed) extra properties
, e.detail.tagify.getCleanValue() // Same as above, without the extra properties
, e.detail.value // a string representing the tags
)
}, [])
return (
<Tags
whitelist={['item 1', 'another item', 'item 3']}
placeholder='Add some tags'
settings={{
blacklist: ["xxx"],
maxTags: 4,
dropdown: {
enabled: 0 // always show suggestions dropdown
}
}}
defaultValue="a,b,c" // initial value
onChange={onChange}
/>
)
}
To gain full access to Tagify's (instance) inner methods, A custom ref
can be used:
import Tags, {MixedTags} from "@yaireo/tagify/react";
...
const tagifyRef = useRef()
...
<Tags tagifyRef={tagifyRef} ... />
// or mix-mode
<MixedTags
settings={...}
onChange={...}
defaultValue={`This is a textarea which mixes text with [[{"value":"tags"}]].`}
/>
<MixedTags>
component is a shorthand for <Tags InputMode="textarea">
Updating the component's state
The settings
prop is only used once in the initialization process, please do not update it afterwards.
Prop | Type | Updatable | Info |
---|---|---|---|
settings | Object | See settings section | |
name | String | ā | <input> 's element name attribute |
value | String/Array | ā | Initial value. |
defaultValue | String/Array | Same as `value prop | |
placeholder | String | ā | placeholder text for the component |
readOnly | Boolean | ā | Toggles readonly state. With capital O . |
tagifyRef | Object | useRef hook refference for the component inner instance of vanilla Tagify (for methods access) |
|
showDropdown | Boolean/String | ā | if true shows the suggestions dropdown. if assigned a String, show the dropdown pre-filtered. |
loading | Boolean | ā | Toggles loading state for the whole component |
whitelist | Array | ā | Sets the whitelist which is the basis for the suggestions dropdown & autocomplete |
className | String | Component's optional class name to be added | |
InputMode | String | "textarea" will create a <textarea> (hidden) element instead of the default <input> and automatically make Tagify act as "mix mode" |
|
autoFocus | Boolean | Should the component have focus on mount. Must be unique, per-page. | |
children | String/Array | value /defaultValue props are prefered |
|
onChange | Function | See events section | |
onInput | Function | See events section | |
onAdd | Function | See events section | |
onRemove | Function | See events section | |
onInvalid | Function | See events section | |
onClick | Function | See events section | |
onKeydown | Function | See events section | |
onFocus | Function | See events section | |
onBlur | Function | See events section | |
onEditInput | Function | See events section | |
onEditBeforeUpdate | Function | See events section | |
onEditUpdated | Function | See events section | |
onEditStart | Function | See events section | |
onEditKeydown | Function | See events section | |
onDropdownShow | Function | See events section | |
onDropdownHide | Function | See events section | |
onDropdownSelect | Function | See events section | |
onDropdownScroll | Function | See events section | |
onDropdownNoMatch | Function | See events section | |
onDropdownUpdated | Function | See events section |
Vue
I don't know Vue at all and this thin wrapper was built by a friend who knows.
To import the wrapper file, use the import path @yaireo/tagify/vue
jQuery version
This variant of Tagify code has been deprecated because it doesn't really add much in terms of ease-of-use. I only made it so it would be possible to use jQuery selectors & chaining but the (jQuery) port really isn't needed when implementing Tagify within a jQuery code.
Below is the documentation for previous Tagify packages versions which included support:
jQuery.tagify.js
A jQuery wrapper version is also available, but I advise not using it because it's basically the exact same as the "normal" script (non-jqueryfied) and all the jQuery's wrapper does is allowing to chain the event listeners for ('add', 'remove', 'invalid')
$('[name=tags]')
.tagify()
.on('add', function(e, tagData){
console.log('added', ...tagData) // data, index, and DOM node
});
Accessing methods can be done via the .data('tagify')
:
$('[name=tags]').tagify();
// get tags from the server (ajax) and add them:
$('[name=tags]').data('tagify').addTags('aaa, bbb, ccc')
HTML input & textarea attributes
The below list of attributes affect Tagify. These can also be set by Tagify settings Object manually, and not declerativly (via attributes).
Attribute | Example | Info |
---|---|---|
pattern | <input pattern='^[A-Za-z_ā² ]{1,15}$'> |
Tag Regex pattern which tag input is validated by. |
placeholder | <input placeholder='please type your tags'> |
This attribute's value will be used as a constant placeholder, which is visible unless something is being typed. |
readOnly | <input readOnly> |
No user-interaction (add/remove/edit) allowed. |
autofocus | <input autofocus> |
Automatically focus the the Tagify component when the component is loaded |
required | <input required> |
Adds a required attribute to the Tagify wrapper element. Does nothing more. |
Caveats
<input>
wrapped in a<label>
doesn't work - #1219 and so Tagify internally sets the label'sfor
attribute to an empty string, so clicking the Tagify component will not blur it and re-focus on the hidden input/textarea element Tagify is "connected" to
FAQ
List of questions & scenarios which might come up during development with Tagify:
const tagify = new Tagify(tagNode, {
whitelist: ["a", "b", "c"]
})
If changes to the whitelist are needed, they should be done like so:
Incorrect:
tagify.settings.whitelist = ["foo", "bar"]
Correct:
// set the whitelist directly on the instance and not on the "settings" property
tagify.whitelist = ["foo", "bar"]
Tagify does not accept just any kind of data structure.
If a tag data is represented as an Object
, it must contain a unique property value
which Tagify uses to check if a tag already exists, among other things, so make sure it is present.
Incorrect:
[{ "id":1, "name":"foo bar" }]
Correct:
[{ "id":1, "value": 1, "name":"foo bar" }]
[{ "value":1, "name":"foo bar" }]
[{ "value":"foo bar" }]
// ad a simple array of Strings
["foo bar"]
In framework-less projects, the developer should save the state of the Tagify component (somewhere), and
the question is:
when should the state be saved?
On every change made to Tagify's internal state (tagify.value
via the update()
method).
var tagify = new Tagify(...)
// listen to "change" events on the "original" input/textarea element
tagify.DOM.originalInput.addEventListener('change', onTagsChange)
// This example uses async/await but you can use Promises, of course, if you prefer.
async function onTagsChange(e){
const {name, value} = e.target
// "imaginary" async function "saveToServer" should get the field's name & value
await saveToServer(name, value)
}
If you are using React/Vue/Angular or any "modern" framework, then you already know how to
attach "onChange" event listeners to your <input>
/<textarea>
elements, so the above is irrelevant.
Stopping tags from wrapping to new lines, add this to your .tagify
selector CSS Rule:
flex-wrap: nowrap;
Tagify internally has state
property, per Tagify
instance
and this may be useful for a variety of things when implementing a specific scenario.
var tagify = new Tagify(...)
var formElm = document.forms[0]; // just an example
tagify.on('keydown', onTagifyKeyDown)
function onTagifyKeyDown(e){
if( e.key == 'Enter' && // "enter" key pressed
!tagify.state.inputText && // assuming user is not in the middle or adding a tag
!tagify.state.editing // user not editing a tag
){
setTimeout(() => formElm.submit()) // put some buffer to make sure tagify has done with whatever, to be on the safe-side
}
}
- Double-click tag fires both "edit" & "click" custom events
- Manualy open the suggestions dropdown
- Render your own suggestions dropdown
- Allow max length on mix mode
- Always show dropdown
- Limit the length of a tag value (minimum & maximum)
- Mixed mode initial value
- Random colors for each tag
- Format input value for server side
- Writing to tagify textarea
- Scroll all tags within one line, instead of growing vertically
- Insert emoji at caret location when editing a tag
- propagate
change
event - Manually update tag data after it was added
- Ajax Whitelist with "enforceWhitelist" setting enabled
- Custom (multiple) tag validation & AJAX
- Make tags from pasted multi-line text
- Add a tag at caret position in mixed mode
- Change automatic title tooltips for invalid tags
- Create a submenu for the suggestions dropdown
- Hide placeholder if tags exist
CSS Variables
Learn more about CSS Variables) (custom properties)
Tagify's utilizes CSS variables which allow easy customization without the need to manually write CSS. If you do wish to heavily style your Tagify components, then you can (and should) use the below variables within your modified styles as much as you can.
For a live example, see the demos page.
Name | Info |
---|---|
--tags-disabled-bg | Tag background color when disabled |
--tags-border-color | The outer border color which surrounds tagify |
--tags-hover-border-color | hover state |
--tags-focus-border-color | focus state |
--tag-border-radius | Tag border radius |
--tag-bg | Tag background color |
--tag-hover | Tag background color on hover (mouse) |
--tag-text-color | Tag text color |
--tag-text-color--edit | Tag text color when a Tag is being edited |
--tag-pad | Tag padding, from all sides. Ex. .3em .5em |
--tag--min-width | Minimum Tag width |
--tag--max-width | Maximum tag width, which gets trimmed with hellip after |
--tag-inset-shadow-size | This is the inner shadow size, which dictates the color of the Tags.It's important the size fits exactly to the tag.Change this if you change the --tag-pad or fontsize. |
--tag-invalid-color | For border color of edited tags with invalid value being typed into them |
--tag-invalid-bg | Background color for invalid Tags. |
--tag-remove-bg | Tag background color when hovering the Ć button. |
--tag-remove-btn-color | Remove (Ć ) button text color |
--tag-remove-btn-bg | Remove (Ć ) button background color |
--tag-remove-btn-bg--hover | Remove (Ć ) button hover background color |
--input-color | Input text color |
--tag-hide-transition | Controls the transition property when a tag is removed. default is '.3s' |
--placeholder-color | Placeholder text color |
--placeholder-color-focus | Placeholder text color when Tagify has focus and no input was typed |
--loader-size | Loading animation size. 1em is pretty big, default is a bit less. |
--readonly-striped | Either a value 1 or 0 can be used to toggle the striped diagonal background in readonly |
Suggestions Dropdown CSS variables
should be appiled on the :root {...}
selector
Name | Info |
---|---|
--tagify-dd-color-primary | Sugegstion's background color on hover |
--tagify-dd-text-color | Sugegstion's text color |
--tagify-dd-bg-color | The suggestion's dropdown background color |
--tagify-dd-item--hidden-duration | When selecting a suggestion, this is the duration for it to become hidden (shrink) |
--tagify-dd-item-pad | Suggestion item padding |
--tagify-dd-max-height | Maximum height of the suggestions dropdown (300px by default) |
Full list of Tagify's SCSS variables
Methods
Tagify
is prototype based and There are many methods, but I've chosen to list the most relevant ones:
Name | Parameters | Info |
---|---|---|
destroy |
Reverts the input element back as it was before Tagify was applied | |
removeAllTags |
Removes all tags and resets the original input tag's value property | |
addTags |
Array /String /Object tag(s) to addBoolean clear input after addingBoolean - skip adding invalids |
Accepts a String (word, single or multiple with a delimiter), an Array of Objects (see above) or Strings. |
addMixTags |
Array /String |
Bypasses the normalization process in addTags , forcefully adding tags at the last caret location or at the end, if there's no last caret location saved (at tagify.state.selection ) |
removeTags |
Array /HTMLElement /String tag(s) to removesilent does not update the component's valuetranDuration Transition duration (in ms ) |
(#502) Remove single/multiple Tags. When nothing passed, removes last tag. silent - A flag, which when turned on, does not remove any value and does not update the original input value but simply removes the tag from tagifytranDuration - delay for animation, after which the tag will be removed from the DOM |
addEmptyTag |
Object (tagData ) |
Create an empty tag (optionally with pre-defined data) and enters "edit" mode directly. See demo |
loadOriginalValues |
String /Array |
Converts the input's value into tags. This method gets called automatically when instansiating Tagify. Also works for mixed-tags |
getWhitelistItemsByValue |
Object |
{value} - return an Array of found matching items (case-insensitive) |
getTagIndexByValue |
String |
Returns the index of a specific tag, by value |
getTagElmByValue |
String |
Returns the first matched tag node, if found |
isTagDuplicate |
String |
Returns how many tags already exists with that value |
parseMixTags |
String |
Converts a String argument ([[foo]]ā and [[bar]]ā are.. ) into HTML with mixed tags & texts |
getTagElms |
Returns a DOM nodes list of all the tags | |
getTagElmByValue |
String |
Returns a specific tag DOM node by value |
getSetTagData |
HTMLElement , Object |
set/get tag data on a tag element (has.tagify__tag class by default) |
editTag |
HTMLElement |
Goes to edit-mode in a specific tag |
getTagTextNode |
HTMLElement |
Get the node which has the actual tag's content |
setTagTextNode |
HTMLElement , String |
Sets the text of a tag (DOM only, does not affect actual data) |
replaceTag |
tagElm , Object (tagData ) |
Exit a tag's edit-mode. if "tagData" exists, replace the tag element with new data and update Tagify value |
loading |
Boolean |
toggle loading state on/off (Ex. AJAX whitelist pulling) |
tagLoading |
HTMLElement , Boolean |
same as above but for a specific tag element |
createTagElem |
Object (tagData ) |
Returns a tag element from the supplied tag data |
injectAtCaret |
HTMLElement (injectedNode ), Object (range ) |
Injects text or HTML node at last caret position. range parameter is optional |
placeCaretAfterNode |
HTMLElement |
Places the caret after a given node |
setRangeAtStartEnd |
Boolean , HTMLElement |
Places the caret at the start or the end of a node. |
insertAfterTag |
HTMLElement (tag element), HTMLElement /String (whatever to insert after) |
|
toggleClass |
Boolean |
Toggles class on the main tagify container (scope ) |
dropdown.selectAll |
Add all whitelist items as tags and close the suggestion dropdown | |
dropdown.show |
String |
Shows the suggestions list dropdown. A string parameter allows filtering the results |
dropdown.hide |
Boolean |
Hides the suggestions list dropdown (if it's not managed manually by the developer) |
dropdown.toggle |
Boolean |
Toggles dropdown show/hide. the boolean parameter will force-show |
updateValueByDOMTags |
Iterate tag DOM nodes and re-build the tagify.value array (call this if tags get sorted manually) |
|
parseTemplate |
String /Function (template name or function), Array (data) |
converts a template string (by selecting one from the settings.templates by name or supplying a template function which returns a String) into a DOM node |
setReadonly |
Boolean |
Toggles "readonly" mode on/off |
setDisabled |
Boolean |
Toggles "disabled" mode on/off |
getPersistedData |
String |
Get data for the specific instance by parameter |
setPersistedData |
* , String |
Set data for the specific instance. Must supply a second parameter which will be the key to save the data in the localstorage (under the tagify namespace) |
clearPersistedData |
String |
Clears data for the specific instance, by parameter. If the parameter is ommited, clears all persisted data related to this instance (by its id which was set in the instance's settings) |
setPlaceholder |
String |
Sets the placeholder's value. See demo |
Events
To listen to tagify
events use the .on(EVENT_NAME, EVENT_CALLBACK_REFERENCE)
method and stop listening use the .off(EVENT_NAME, EVENT_CALLBACK_REFERENCE)
All triggered events return the instance's scope (tagify).
See e.detail
for custom-event additional data.
var tagify = new Tagify(...)
// events can be chainable, and multiple events may be binded for the same callback
tagify
.on('input', onInput)
.on('edit:input edit:updated edit:start edit:keydown', e => console.log(e.type, e.detail))
function onInput(e) {
console.log(e.detail)
}
// later in the code you might do to unsubscribe the event listener with a specific callback
tagify.off('input', onInput)
var tagify = new Tagify(inputNode, {
callbacks: {
"change": (e) => console.log(e.detail),
"dropdown:show": (e) => console.log(e.detail)
}
})
Name | Info |
---|---|
change | Any change to the value has occurred. e.detail.value callback listener argument is a String |
add | A tag has been added |
remove | A tag has been removed (use removeTag instead with jQuery) |
invalid | A tag has been added but did not pass validation. See event detail |
input | Input event, when a tag is being typed/edited. e.detail exposes value , inputElm & isValid |
paste | Text pasted (not while editing a tag). The pasted text might or might not have been converted into tags, depneding if pasteAsTags setting is set to false |
click | Clicking a tag. Exposes the tag element, its index & data |
dblclick | Double-clicking a tag |
keydown | When Tagify input has focus and a key was pressed |
focus | The component currently has focus |
blur | The component lost focus |
edit:input | Typing inside an edited tag |
edit:beforeUpdate | Just before a tag has been updated, while still in "edit" mode |
edit:updated | A tag as been updated (changed view editing or by directly calling the replaceTag() method) |
edit:start | A tag is now in "edit mode" |
edit:keydown | keydown event while an edited tag is in focus |
dropdown:show | Suggestions dropdown is to be rendered. The dropdown DOM node is passed in the callback, see demo. |
dropdown:hide | Suggestions dropdown has been removed from the DOM |
dropdown:select | Suggestions dropdown item selected (by mouse/keyboard/touch) |
dropdown:scroll | Tells the percentage scrolled. (event.detail.percentage ) |
dropdown:noMatch | No whitelist suggestion item matched for the typed input. At this point it is possible to manually set tagify.suggestedListItems to any possible custom value, for example: [{ value:"default" }] |
dropdown:updated | Fired when the dropdown list is re-filtered while suggestions list is visible and a tag was removed so it was re-added as a suggestion |
Hooks
Promise-based hooks for async program flow scenarios.
Allows to "hook" (intervene) at certain points of the program, which were selected as a suitable place to pause the program flow and wait for further instructions on how/if to proceed.
var input = document.querySelector('input')
var tagify = new Tagify(input,{
hooks: {
/**
* Removes a tag
* @param {Array} tags [Array of Objects [{node:..., data:...}, {...}, ...]]
*/
beforeRemoveTag : function( tags ){
return new Promise((resolve, reject) => {
confirm("Remove " + tags[0].data.value + "?")
? resolve()
: reject()
})
}
}
})
Name | Parameters | Info |
---|---|---|
beforeRemoveTag | Array (of Objects) | Example |
suggestionClick | Object (click event data) | Example |
beforePaste | tagify , pastedText , clipboardData |
Before pasted text was added to Tagify. Resolve with new paste value if needed |
beforeKeyDown | On any browser keydown event, but called after keydown Tagify event |
Settings
Name | Type | Default | Info |
---|---|---|---|
id | String | See Persisted data | |
tagTextProp | String | "value" |
Tag data Object property which will be displayed as the tag's text. Remember to keep "value" property unique. See Also: dropdown.mapValueTo , dropdown.searchKeys |
placeholder | String | Placeholder text. If this attribute is set on an input/textarea element it will override this setting | |
delimiters | String | "," |
[RegEx string] split tags by any of these delimiters. Example delimeters: ",|.| " (comma, dot or whitespace) |
pattern | String/RegEx | null | Validate input by RegEx pattern (can also be applied on the input itself as an attribute) Ex: /[1-9]/ |
mode | String | null | Use select for single-value dropdown-like select box. See mix as value to allow mixed-content. The 'pattern' setting must be set to some character. |
mixTagsInterpolator | Array | ['[[', ']]'] |
Interpolation for mix mode. Everything between these will become a tag |
mixTagsAllowedAfter | RegEx | /,|\.|\:|\s/ |
Define conditions in which typed mix-tags content is allowing a tag to be created after. |
duplicates | Boolean | false | Should duplicate tags be allowed or not |
trim | Boolean | true | If true trim the tag's value (remove before/after whitespaces) |
enforceWhitelist | Boolean | false | Should ONLY use tags allowed in whitelist.In mix-mode , setting it to false will not allow creating new tags. |
userInput | Boolean | true | Disable manually typing/pasting/editing tags (tags may only be added from the whitelist). Can also use the disabled attribute on the original input element. To update this after initialization use the setter tagify.userInput |
focusable | Boolean | true | Allow the component as a whole to recieve focus. Implementations of Tagify without an external border should not allow 'focusability' which causes unwanted behaviour. (use-case example) |
autoComplete.enabled | Boolean | true | Tries to suggest the input's value while typing (match from whitelist) by adding the rest of term as grayed-out text |
autoComplete.rightKey | Boolean | false | If true , when ā is pressed, use the suggested value to create a tag, else just auto-completes the input. In mixed-mode this is ignored and treated as "true" |
autoComplete.tabKey | Boolean | false | If true , pressing tab key would only auto-complete (if a suggesiton is highlighted) but will not convert to a tag (like rightKey does) also, unless clicked again (considering the addTagOn setting). |
whitelist | Array | [] |
An array of allowed tags (Strings or Objects). When using Objects in the whitelist array a value property is a must & should be unique. Also, the *whitelist used for auto-completion when autoCompletion.enabled is true |
blacklist | Array | [] |
An array of tags which aren't allowed |
addTagOnBlur | Boolean | true | Automatically adds the text which was inputed as a tag when blur event happens |
addTagOn | Array | ['blur', 'tab', 'enter'] |
If the tagify field (in a normal mode) has any non-tag input in it, convert it to a tag on any of these "events": blur away from the field, click "tab"/"enter" key |
onChangeAfterBlur | Boolean | true | By default, the native way of inputs' onChange events is kept, and it only fires when the field is blured. |
pasteAsTags | Boolean | true | Automatically converts pasted text into tags |
callbacks | Object | {} |
Exposed callbacks object to be triggered on events: 'add' / 'remove' tags |
maxTags | Number | Infinity | Maximum number of allowed tags. when reached, adds a class "tagify--hasMaxTags" to <Tags> |
editTags | Object/Number | {} |
false or null will disallow editing |
editTags.clicks | Number | 2 | Number of clicks to enter "edit-mode": 1 for single click. Any other value is considered as double-click |
editTags.keepInvalid | Boolean | true | keeps invalid edits as-is until esc is pressed while in focus |
templates | Object | wrapper , tag , dropdownItem |
Object consisting of functions which return template strings |
validate | Function | If the pattern setting does not meet your needs, use this function, which receives tag data object as an argument and should return true if validation passed or false /string if not. A string may be returned as the reason for the validation failure. |
|
transformTag | Function | Takes a tag data as argument and allows mutating it before a tag is created or edited and also before validation.Should not return anything, only mutate the argument. |
|
keepInvalidTags | Boolean | false | If true , do not remove tags which did not pass validation |
createInvalidTags | Boolean | true | If true , create invalid-tags. Otherwise, keep the editable input and do not create tags from it |
skipInvalid | Boolean | false | If true , do not add invalid, temporary, tags before automatically removing them |
backspace | * | true | On pressing backspace key: true - remove last tag edit - edit last tagfalse - do nothing (useful for outside style) |
originalInputValueFormat | Function | If you wish your original input/textarea value property format to other than the default (which I recommend keeping) you may use this and make sure it returns a string. |
|
mixMode.insertAfterTag | Node/String | \u00A0 |
node or string to add after a tag added |
a11y.focusableTags | Boolean | false | allows tags to get focus, and also to be deleted via Backspace |
dropdown.enabled | Number | 2 | Minimum characters input for showing a suggestions list. false will not render a suggestions list. |
dropdown.caseSensitive | Boolean | false | if true , match exact item when a suggestion is selected (from the dropdown) and also more strict matching for dulpicate items. Ensure fuzzySearch is false for this to work. |
dropdown.maxItems | Number | 10 | Maximum items to show in the suggestions list |
dropdown.classname | String | "" |
Custom classname for the dropdown suggestions list |
dropdown.fuzzySearch | Boolean | true | Enables filtering dropdown items values' by string containing and not only beginning |
dropdown.sortby | String/Function | If set as startsWith string, the suggestions list will be sorted with matched items which starts with the query shown first, and exact matches shown before all. If this setting is defined as a function , it recieves two arguments: the array of filtered items and the query and it must return an Array.(default sorting order is same as the whitelist's) |
|
dropdown.accentedSearch | Boolean | true | Enable searching for accented items in the whitelist without typing exact match (#491) |
dropdown.includeSelectedTags | Boolean | false | Should the suggestions list Include already-selected tags (after filtering) |
dropdown.escapeHTML | Boolean | true | Escapes HTML entities in the suggestions' rendered text |
dropdown.position | String | "all" |
manual - will not render the dropdown, and you would need to do it yourself. See demotext - places the dropdown next to the caretinput - places the dropdown next to the input (useful in rare situations)all - normal, full-width design |
dropdown.RTL | Boolean | false | Dictates the dropdown's horizontal starting position. By default it would be aligned with the left side of the Tagify component. |
dropdown.highlightFirst | Boolean | false | When a suggestions list is shown, highlight the first item, and also suggest it in the input (The suggestion can be accepted with ā key) |
dropdown.closeOnSelect | Boolean | true | close the dropdown after selecting an item, if enabled:0 is set (which means always show dropdown on focus) |
dropdown.clearOnSelect | Boolean | true | Keep typed text after selecting a suggestion |
dropdown.mapValueTo | Function/String | If whitelist is an Array of Objects:Ex. [{value:'foo', email:'[email protected]'},...] ) this setting controlls which data key will be printed in the dropdown. Ex.1: mapValueTo: data => "To:" + data.email Ex.2: mapValueTo: "email" |
|
dropdown.searchKeys | Array | ["value", "searchBy"] |
When a user types something and trying to match the whitelist items for suggestions, this setting allows matching other keys of a whitelist objects |
dropdown.appendTarget | HTMLNode/Function | document.body |
Target-Node which the suggestions dropdown is appended to (only when rendered). If used as a function, should return a DOM node. |
dropdown.placeAbove | Boolean | If defined, will force the placement of the dropdown in respect to the Boolean value: true will always show the suggestions dropdown above the input field and false will always show it below. By default this setting it not defined and the placement of the dropdown is automatically decided according to the space availble, where opening it below the input is preferred. |
More Resourcesto explore the angular.
mail [email protected] to add your project or resources here š„.
- 1React Community ā React
https://react.dev/community
The library for web and native user interfaces
- 2Patterns.dev
https://www.patterns.dev/
Learn JavaScript design and performance patterns for building more powerful web applications.
- 3React
https://react.dev/
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
- 4Quick Start ā React
https://react.dev/learn
The library for web and native user interfaces
- 5Snack - React Native in the browser
https://snack.expo.dev/
Write code in Expo's online editor and instantly use it on your phone.
- 6React JavaScript Tutorial in Visual Studio Code
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
React JavaScript tutorial showing IntelliSense, debugging, and code navigation support in the Visual Studio Code editor.
- 7Overview Ā· React Native
https://reactnative.dev/community/overview
The React Native Community
- 8React Native Ā· Learn once, write anywhere
https://reactnative.dev/
A framework for building native apps using React
- 9React Conferences ā React
https://react.dev/community/conferences
The library for web and native user interfaces
- 10React - CodeSandbox
https://codesandbox.io/s/new
React example starter project
- 11React friendly API wrapper around MapboxGL JS
https://github.com/visgl/react-map-gl
React friendly API wrapper around MapboxGL JS. Contribute to visgl/react-map-gl development by creating an account on GitHub.
- 12React components for Leaflet maps
https://github.com/PaulLeCam/react-leaflet
React components for Leaflet maps. Contribute to PaulLeCam/react-leaflet development by creating an account on GitHub.
- 13The visual editor for React
https://github.com/measuredco/puck
The visual editor for React. Contribute to measuredco/puck development by creating an account on GitHub.
- 14š Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
https://github.com/mkosir/react-parallax-tilt
š Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB) - mkosir/react-parallax-tilt
- 15Fast, easy and reliable testing for anything that runs in a browser.
https://github.com/cypress-io/cypress
Fast, easy and reliable testing for anything that runs in a browser. - cypress-io/cypress
- 16šØš A React renderer for Three.js
https://github.com/pmndrs/react-three-fiber
šØš A React renderer for Three.js. Contribute to pmndrs/react-three-fiber development by creating an account on GitHub.
- 17Create skeleton screens that automatically adapt to your app!
https://github.com/dvtng/react-loading-skeleton
Create skeleton screens that automatically adapt to your app! - dvtng/react-loading-skeleton
- 18Open source, production-ready animation and gesture library for React
https://github.com/framer/motion
Open source, production-ready animation and gesture library for React - framer/motion
- 19The recommended Code Splitting library for React āļøāØ
https://github.com/gregberge/loadable-components
The recommended Code Splitting library for React āļøāØ - gregberge/loadable-components
- 20A collection of composable React components for building interactive data visualizations
https://github.com/FormidableLabs/victory
A collection of composable React components for building interactive data visualizations - FormidableLabs/victory
- 21TW Elements integration with React - Free Examples & Tutorial
https://tw-elements.com/docs/standard/integrations/react-integration/
This article shows you how to integrate React application with TW Elements. Free download, open source license.
- 22š¤ Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://github.com/TanStack/router
š¤ Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
- 23š„ Make videos programmatically with React
https://github.com/remotion-dev/remotion
š„ Make videos programmatically with React. Contribute to remotion-dev/remotion development by creating an account on GitHub.
- 24The HTML touch slider carousel with the most native feeling you will get.
https://github.com/rcbyr/keen-slider
The HTML touch slider carousel with the most native feeling you will get. - rcbyr/keen-slider
- 25A JS library for predictable global state management
https://github.com/reduxjs/redux
A JS library for predictable global state management - reduxjs/redux
- 26Simple reusable React error boundary component
https://github.com/bvaughn/react-error-boundary
Simple reusable React error boundary component. Contribute to bvaughn/react-error-boundary development by creating an account on GitHub.
- 27Declarative routing for React
https://github.com/remix-run/react-router
Declarative routing for React. Contribute to remix-run/react-router development by creating an account on GitHub.
- 28Personal blog by Dan Abramov.
https://github.com/gaearon/overreacted.io
Personal blog by Dan Abramov. Contribute to gaearon/overreacted.io development by creating an account on GitHub.
- 29Next generation frontend tooling. It's fast!
https://github.com/vitejs/vite
Next generation frontend tooling. It's fast! Contribute to vitejs/vite development by creating an account on GitHub.
- 30React Hooks for Data Fetching
https://github.com/vercel/swr
React Hooks for Data Fetching. Contribute to vercel/swr development by creating an account on GitHub.
- 31š Create PDF files using React
https://github.com/diegomura/react-pdf
š Create PDF files using React. Contribute to diegomura/react-pdf development by creating an account on GitHub.
- 32nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://github.com/plouc/nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries - plouc/nivo
- 33Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.
https://github.com/facebookexperimental/Recoil
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features o...
- 34[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps
https://github.com/expo/router
[ARCHIVE]: Expo Router has moved to expo/expo -- The File-based router for universal React Native apps - expo/router
- 35š”ļø āļø A simple, scalable, and powerful architecture for building production ready React applications.
https://github.com/alan2207/bulletproof-react
š”ļø āļø A simple, scalable, and powerful architecture for building production ready React applications. - GitHub - alan2207/bulletproof-react: š”ļø āļø A simple, scalable, and powerful architecture for...
- 36The Select Component for React.js
https://github.com/JedWatson/react-select
The Select Component for React.js. Contribute to JedWatson/react-select development by creating an account on GitHub.
- 37Toolkit for building accessible web apps with React
https://github.com/ariakit/ariakit
Toolkit for building accessible web apps with React - ariakit/ariakit
- 38Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress š
https://github.com/styled-components/styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress š - styled-components/styled-components
- 39Create the next immutable state by mutating the current one
https://github.com/immerjs/immer
Create the next immutable state by mutating the current one - immerjs/immer
- 40An open-source, cross-platform terminal for seamless workflows
https://github.com/wavetermdev/waveterm
An open-source, cross-platform terminal for seamless workflows - wavetermdev/waveterm
- 41Isolated React component development environment with a living style guide
https://github.com/styleguidist/react-styleguidist
Isolated React component development environment with a living style guide - styleguidist/react-styleguidist
- 42šÆ visx | visualization components
https://github.com/airbnb/visx
šÆ visx | visualization components. Contribute to airbnb/visx development by creating an account on GitHub.
- 43Build forms in React, without the tears š
https://github.com/jaredpalmer/formik
Build forms in React, without the tears š . Contribute to jaredpalmer/formik development by creating an account on GitHub.
- 44Routing and navigation for your React Native apps
https://github.com/react-navigation/react-navigation
Routing and navigation for your React Native apps. Contribute to react-navigation/react-navigation development by creating an account on GitHub.
- 45The library for web and native user interfaces.
https://github.com/facebook/react
The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.
- 46š¹ Draw arrows between React elements š
https://github.com/pierpo/react-archer
š¹ Draw arrows between React elements š. Contribute to pierpo/react-archer development by creating an account on GitHub.
- 47The React Framework
https://github.com/vercel/next.js
The React Framework. Contribute to vercel/next.js development by creating an account on GitHub.
- 48Winamp 2 reimplemented for the browser
https://github.com/captbaritone/webamp
Winamp 2 reimplemented for the browser. Contribute to captbaritone/webamp development by creating an account on GitHub.
- 49The best React-based framework with performance, scalability and security built in.
https://github.com/gatsbyjs/gatsby
The best React-based framework with performance, scalability and security built in. - gatsbyjs/gatsby
- 50Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
https://github.com/reactjs/react-rails
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker. - reactjs/react-rails
- 51The monorepo home to all of the FormatJS related libraries, most notably react-intl.
https://github.com/formatjs/formatjs
The monorepo home to all of the FormatJS related libraries, most notably react-intl. - formatjs/formatjs
- 52Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://github.com/microsoft/fluentui
Fluent UI web represents a collection of utilities, React components, and web components for building web applications. - microsoft/fluentui
- 53š¤ Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://github.com/TanStack/query
š¤ Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query
- 54Simple, scalable state management.
https://github.com/mobxjs/mobx
Simple, scalable state management. Contribute to mobxjs/mobx development by creating an account on GitHub.
- 55A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.
https://github.com/formkit/auto-animate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. - formkit/auto-animate
- 56Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://github.com/remix-run/remix
Build Better Websites. Create modern, resilient user experiences with web fundamentals. - remix-run/remix
- 57svg react icons of popular icon packs
https://github.com/react-icons/react-icons
svg react icons of popular icon packs. Contribute to react-icons/react-icons development by creating an account on GitHub.
- 58š©āš¤ CSS-in-JS library designed for high performance style composition
https://github.com/emotion-js/emotion
š©āš¤ CSS-in-JS library designed for high performance style composition - emotion-js/emotion
- 59Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://github.com/shadcn-ui/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. - shadcn-ui/ui
- 60:rocket: Ā A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://github.com/apollographql/apollo-client
:rocket: Ā A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server. - apollographql/apollo-client
- 61Vest ā Declarative validations framework
https://github.com/ealush/vest
Vest ā Declarative validations framework. Contribute to ealush/vest development by creating an account on GitHub.
- 62Set up a modern web app by running one command.
https://github.com/facebook/create-react-app
Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub.
- 63A React component for Instagram like stories
https://github.com/mohitk05/react-insta-stories
A React component for Instagram like stories. Contribute to mohitk05/react-insta-stories development by creating an account on GitHub.
- 64ā¤ļø A heart-shaped toggle switch component for React.
https://github.com/anatoliygatt/heart-switch
ā¤ļø A heart-shaped toggle switch component for React. - anatoliygatt/heart-switch
- 65why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
https://github.com/welldone-software/why-did-you-render
why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.) - welldone-software/why-did-you-render
- 66Relay is a JavaScript framework for building data-driven React applications.
https://github.com/facebook/relay
Relay is a JavaScript framework for building data-driven React applications. - facebook/relay
- 67The Fullstack Tutorial for GraphQL
https://github.com/howtographql/howtographql
The Fullstack Tutorial for GraphQL. Contribute to howtographql/howtographql development by creating an account on GitHub.
- 68The compiler for ReScript.
https://github.com/rescript-lang/rescript-compiler
The compiler for ReScript. Contribute to rescript-lang/rescript-compiler development by creating an account on GitHub.
- 69A JavaScript library to position floating elements and create interactions for them.
https://github.com/floating-ui/floating-ui
A JavaScript library to position floating elements and create interactions for them. - floating-ui/floating-ui
- 70Data Visualization Components
https://github.com/uber/react-vis
Data Visualization Components. Contribute to uber/react-vis development by creating an account on GitHub.
- 71The lightweight and flexible Cookie Consent Banner
https://github.com/porscheofficial/cookie-consent-banner
The lightweight and flexible Cookie Consent Banner - porscheofficial/cookie-consent-banner
- 72Sandbox for developing and testing UI components in isolation
https://github.com/react-cosmos/react-cosmos
Sandbox for developing and testing UI components in isolation - react-cosmos/react-cosmos
- 73š±š š§© Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://github.com/alibaba/formily
š±š š§© Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 - alibaba/formily
- 74fast, portable, and extensible cmd+k interface for your site
https://github.com/timc1/kbar
fast, portable, and extensible cmd+k interface for your site - timc1/kbar
- 75The zero configuration build tool for the web. š¦š
https://github.com/parcel-bundler/parcel
The zero configuration build tool for the web. š¦š. Contribute to parcel-bundler/parcel development by creating an account on GitHub.
- 76A library for development of single-page full-stack web applications in clj/cljs
https://github.com/fulcrologic/fulcro
A library for development of single-page full-stack web applications in clj/cljs - fulcrologic/fulcro
- 77š¤ Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://github.com/TanStack/table
š¤ Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table - TanStack/table
- 78š¬ The most complete chat UI for React Native
https://github.com/FaridSafi/react-native-gifted-chat
š¬ The most complete chat UI for React Native. Contribute to FaridSafi/react-native-gifted-chat development by creating an account on GitHub.
- 79Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://github.com/lukasbach/react-complex-tree
Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop - lukasbach/react-complex-tree
- 80āļø A spring physics based React animation library
https://github.com/pmndrs/react-spring
āļø A spring physics based React animation library. Contribute to pmndrs/react-spring development by creating an account on GitHub.
- 81Redefined chart library built with React and D3
https://github.com/recharts/recharts
Redefined chart library built with React and D3. Contribute to recharts/recharts development by creating an account on GitHub.
- 82Bootstrap components built with React
https://github.com/react-bootstrap/react-bootstrap
Bootstrap components built with React. Contribute to react-bootstrap/react-bootstrap development by creating an account on GitHub.
- 83š» Bear necessities for state management in React
https://github.com/pmndrs/zustand
š» Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.
- 84A framework for building native applications using React
https://github.com/facebook/react-native
A framework for building native applications using React - facebook/react-native
- 85š React Hooks for form state management and validation (Web + React Native)
https://github.com/react-hook-form/react-hook-form
š React Hooks for form state management and validation (Web + React Native) - react-hook-form/react-hook-form
- 86A build system for development of composable software.
https://github.com/teambit/bit
A build system for development of composable software. - teambit/bit
- 87š» Primitive and flexible state management for React
https://github.com/pmndrs/jotai
š» Primitive and flexible state management for React - pmndrs/jotai
- 88Your window into the Elastic Stack
https://github.com/elastic/kibana
Your window into the Elastic Stack. Contribute to elastic/kibana development by creating an account on GitHub.
- 89A <QRCode/> component for use with React.
https://github.com/zpao/qrcode.react
A <QRCode/> component for use with React. Contribute to zpao/qrcode.react development by creating an account on GitHub.
- 90Realm is a mobile database: an alternative to SQLite & key-value stores
https://github.com/realm/realm-js
Realm is a mobile database: an alternative to SQLite & key-value stores - realm/realm-js
- 91Internationalization for react done right. Using the i18next i18n ecosystem.
https://github.com/i18next/react-i18next
Internationalization for react done right. Using the i18next i18n ecosystem. - i18next/react-i18next
- 92Optimize React performance and make your React 70% faster in minutes, not months.
https://github.com/aidenybai/million
Optimize React performance and make your React 70% faster in minutes, not months. - GitHub - aidenybai/million: Optimize React performance and make your React 70% faster in minutes, not months.
- 93A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://github.com/refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - refinedev/refine
- 94āļø A React renderer for Figma
https://github.com/react-figma/react-figma
āļø A React renderer for Figma. Contribute to react-figma/react-figma development by creating an account on GitHub.
- 95A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
https://github.com/marmelab/react-admin
A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design - marmelab/react-admin
- 96gcal/outlook like calendar component
https://github.com/jquense/react-big-calendar
gcal/outlook like calendar component. Contribute to jquense/react-big-calendar development by creating an account on GitHub.
- 97Expo
https://expo.dev/
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
- 98Feature-rich and customizable data grid React component
https://github.com/adazzle/react-data-grid
Feature-rich and customizable data grid React component - adazzle/react-data-grid
- 99Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://github.com/mui/material-ui
Material UI: Comprehensive React component library that implements Google's Material Design. Free forever. - mui/material-ui
- 100āļø Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://github.com/preactjs/preact
āļø Fast 3kB React alternative with the same modern API. Components & Virtual DOM. - preactjs/preact
- 101A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
https://github.com/ivanhofer/typesafe-i18n
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. - ivanhofer/typesafe-i18n
- 102Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://github.com/storybookjs/storybook
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation - storybookjs/storybook
- 103Immutable persistent data collections for Javascript which increase efficiency and simplicity.
https://github.com/immutable-js/immutable-js
Immutable persistent data collections for Javascript which increase efficiency and simplicity. - immutable-js/immutable-js
- 104Modern file uploading - components & hooks for React
https://github.com/rpldy/react-uploady
Modern file uploading - components & hooks for React - rpldy/react-uploady
- 105Actor-based state management & orchestration for complex app logic.
https://github.com/statelyai/xstate
Actor-based state management & orchestration for complex app logic. - statelyai/xstate
- 106š Simple and complete React DOM testing utilities that encourage good testing practices.
https://github.com/testing-library/react-testing-library
š Simple and complete React DOM testing utilities that encourage good testing practices. - testing-library/react-testing-library
- 107An enterprise-class UI design language and React UI library
https://github.com/ant-design/ant-design
An enterprise-class UI design language and React UI library - ant-design/ant-design
- 108A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/
https://github.com/pubkey/rxdb
A fast, local first, reactive Database for JavaScript Applications https://rxdb.info/ - pubkey/rxdb
- 109Most modern mobile touch slider with hardware accelerated transitions
https://github.com/nolimits4web/swiper
Most modern mobile touch slider with hardware accelerated transitions - nolimits4web/swiper
- 110ā”ļø The Missing Fullstack Toolkit for Next.js
https://github.com/blitz-js/blitz
ā”ļø The Missing Fullstack Toolkit for Next.js. Contribute to blitz-js/blitz development by creating an account on GitHub.
- 111Full featured HTML framework for building iOS & Android apps
https://github.com/framework7io/framework7
Full featured HTML framework for building iOS & Android apps - framework7io/framework7
- 112A simple and reusable datepicker component for React
https://github.com/Hacker0x01/react-datepicker/
A simple and reusable datepicker component for React - Hacker0x01/react-datepicker
- 113š lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://github.com/yairEO/tagify
š lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue - yairEO/tagify
- 114Zero-runtime CSS in JS library
https://github.com/callstack/linaria
Zero-runtime CSS in JS library. Contribute to callstack/linaria development by creating an account on GitHub.
- 115š A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
https://github.com/downshift-js/downshift
š A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. - downshift-js/downshift
- 116š„¢ A minimalist-friendly ~2.1KB routing for React and Preact
https://github.com/molefrog/wouter
š„¢ A minimalist-friendly ~2.1KB routing for React and Preact - molefrog/wouter
- 117A draggable and resizable grid layout with responsive breakpoints, for React.
https://github.com/react-grid-layout/react-grid-layout
A draggable and resizable grid layout with responsive breakpoints, for React. - react-grid-layout/react-grid-layout
- 118Customizable Icons for React Native with support for image source and full styling.
https://github.com/oblador/react-native-vector-icons
Customizable Icons for React Native with support for image source and full styling. - oblador/react-native-vector-icons
- 119A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://github.com/skellock/reactotron
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows. - infinitered/reactotron
- 120A React component for building Web forms from JSON Schema.
https://github.com/mozilla-services/react-jsonschema-form
A React component for building Web forms from JSON Schema. - rjsf-team/react-jsonschema-form
- 121Mattermost is an open source platform for secure collaboration across the entire software development lifecycle..
https://github.com/mattermost/mattermost-server
Mattermost is an open source platform for secure collaboration across the entire software development lifecycle.. - mattermost/mattermost
- 122Zero-runtime Stylesheets-in-TypeScript
https://github.com/seek-oss/vanilla-extract
Zero-runtime Stylesheets-in-TypeScript. Contribute to vanilla-extract-css/vanilla-extract development by creating an account on GitHub.
- 123Delightful JavaScript Testing.
https://github.com/facebook/jest
Delightful JavaScript Testing. Contribute to jestjs/jest development by creating an account on GitHub.
- 124Curated List of React Components & Libraries.
https://github.com/brillout/awesome-react-components
Curated List of React Components & Libraries. Contribute to brillout/awesome-react-components development by creating an account on GitHub.
- 125Business logic with ease āļø
https://github.com/zerobias/effector
Business logic with ease āļø. Contribute to effector/effector development by creating an account on GitHub.
- 126React-specific linting rules for ESLint
https://github.com/yannickcr/eslint-plugin-react
React-specific linting rules for ESLint. Contribute to jsx-eslint/eslint-plugin-react development by creating an account on GitHub.
- 127š React for interactive command-line apps
https://github.com/vadimdemedes/ink
š React for interactive command-line apps. Contribute to vadimdemedes/ink development by creating an account on GitHub.
- 128tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
https://github.com/matteobruni/tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use compon...
- 129Device Information for React Native iOS and Android
https://github.com/react-native-device-info/react-native-device-info
Device Information for React Native iOS and Android - react-native-device-info/react-native-device-info
- 130List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
https://github.com/sudheerj/reactjs-interview-questions
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!! - sudheerj/reactjs-interview-questions
- 131Cheatsheets for experienced React developers getting started with TypeScript
https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
Cheatsheets for experienced React developers getting started with TypeScript - typescript-cheatsheets/react
- 132babel-relay-plugin
https://www.npmjs.com/package/babel-relay-plugin
Babel Relay Plugin for transpiling GraphQL queries for use with Relay.. Latest version: 0.11.0, last published: 8 years ago. Start using babel-relay-plugin in your project by running `npm i babel-relay-plugin`. There are 73 other projects in the npm registry using babel-relay-plugin.
- 133598fa75e22bdfa44cf47
https://gist.github.com/wincent/598fa75e22bdfa44cf47
GitHub Gist: instantly share code, notes, and snippets.
- 134eyston/relay-composite-network-layer
https://github.com/eyston/relay-composite-network-layer
Contribute to eyston/relay-composite-network-layer development by creating an account on GitHub.
- 135Relay TodoMVC with routing
https://github.com/taion/relay-todomvc
Relay TodoMVC with routing. Contribute to taion/relay-todomvc development by creating an account on GitHub.
- 136Sangria Relay Support
https://github.com/sangria-graphql/sangria-relay
Sangria Relay Support. Contribute to sangria-graphql/sangria-relay development by creating an account on GitHub.
- 137Bringing Modern Web Techniques to Mobile
https://www.youtube.com/watch?v=X6YbAKiLCLU
As we introduce React Native & Relay, learn how we use JavaScript libraries and techniques to help our engineers develop great mobile experiences ever more e...
- 138Use Relay to fetch and store data outside of a React component
https://github.com/acdlite/relay-sink
Use Relay to fetch and store data outside of a React component - acdlite/relay-sink
- 139Use Relay without a GraphQL server
https://github.com/relay-tools/relay-local-schema
Use Relay without a GraphQL server. Contribute to relay-tools/relay-local-schema development by creating an account on GitHub.
- 140Relay + GraphQL + React on Rails
https://github.com/nethsix/relay-on-rails
Relay + GraphQL + React on Rails. Contribute to nethsix/relay-on-rails development by creating an account on GitHub.
- 141React, Relay, GraphQL project skeleton
https://github.com/fortruce/relay-skeleton
React, Relay, GraphQL project skeleton. Contribute to fortruce/relay-skeleton development by creating an account on GitHub.
- 142react-native and relay working out of the box
https://github.com/lenaten/react-native-relay
react-native and relay working out of the box. Contribute to lenaten/react-native-relay development by creating an account on GitHub.
- 143Babel plugin which converts Flow types into Relay fragments
https://github.com/guymers/babel-plugin-flow-relay-query
Babel plugin which converts Flow types into Relay fragments - guymers/babel-plugin-flow-relay-query
- 144:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
https://github.com/lvarayut/relay-fullstack
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS - lvarayut/relay-fullstack
- 145A Go/Golang library to help construct a graphql-go server supporting react-relay.
https://github.com/graphql-go/relay
A Go/Golang library to help construct a graphql-go server supporting react-relay. - graphql-go/relay
- 146React/Relay TodoMVC app, driven by a Golang GraphQL backend
https://github.com/sogko/todomvc-relay-go
React/Relay TodoMVC app, driven by a Golang GraphQL backend - sogko/todomvc-relay-go
- 147Adds server side rendering support to react-router-relay
https://github.com/denvned/isomorphic-relay-router
Adds server side rendering support to react-router-relay - denvned/isomorphic-relay-router
- 148Light, Electron-based Wrapper around GraphiQL
https://github.com/skevy/graphiql-app
Light, Electron-based Wrapper around GraphiQL. Contribute to skevy/graphiql-app development by creating an account on GitHub.
- 149relay-nested-routes
https://www.npmjs.com/package/relay-nested-routes
Nested react-router views for Relay. Latest version: 0.3.1, last published: 9 years ago. Start using relay-nested-routes in your project by running `npm i relay-nested-routes`. There are no other projects in the npm registry using relay-nested-routes.
- 150recompose-relay
https://www.npmjs.com/package/recompose-relay
Recompose helpers for Relay.. Latest version: 0.3.1, last published: 8 years ago. Start using recompose-relay in your project by running `npm i recompose-relay`. There are no other projects in the npm registry using recompose-relay.
- 151Todo example for koa-graphql and relay
https://github.com/chentsulin/koa-graphql-relay-example
Todo example for koa-graphql and relay. Contribute to chentsulin/koa-graphql-relay-example development by creating an account on GitHub.
- 152Utility decorators for Relay components
https://github.com/4Catalyzer/relay-decorators
Utility decorators for Relay components. Contribute to 4Catalyzer/relay-decorators development by creating an account on GitHub.
- 153Build software better, together
https://github.com/relayjs/relay-starter-kit.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 154A very simple starter for React Relay using Browserify
https://github.com/mhart/simple-relay-starter
A very simple starter for React Relay using Browserify - mhart/simple-relay-starter
- 155A thin wrapper for sequelize and graphql-relay
https://github.com/MattMcFarland/sequelize-relay
A thin wrapper for sequelize and graphql-relay. Contribute to MattMcFarland/sequelize-relay development by creating an account on GitHub.
- 156Build software better, together
https://github.com/sequelize/sequelize.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 157A library to help construct a graphql-js server supporting react-relay.
https://github.com/graphql/graphql-relay-js
A library to help construct a graphql-js server supporting react-relay. - graphql/graphql-relay-js
- 158[Deprecated] Relay Classic integration for React Router
https://github.com/relay-tools/react-router-relay
[Deprecated] Relay Classic integration for React Router - relay-tools/react-router-relay
- 159GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
https://github.com/graphql/graphiql
GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools. - graphql/graphiql
- 160A library to help construct a graphql-py server supporting react-relay
https://github.com/graphql-python/graphql-relay-py
A library to help construct a graphql-py server supporting react-relay - graphql-python/graphql-relay-py
- 161Facebook Relay talk - Lunch and Learn session
https://www.youtube.com/watch?v=sP3n-nht0Xo
Talk and live demo of Facebook Relay goodness, with a touch of CSS modules and PostCSS. Presented by Albert Still and Alex Savin
- 162An Application Framework For React at react-europe 2015
https://www.youtube.com/watch?v=IrgHurBjQbg
Relay is a new framework from Facebook that enables declarative data fetching & updates for React applications. Relay components use GraphQL to specify their...
- 163Barebones starting point for a Relay application.
https://github.com/relayjs/relay-starter-kit
Barebones starting point for a Relay application. Contribute to facebookarchive/relay-starter-kit development by creating an account on GitHub.
- 164Seamless Syncing for React (VanJS)
http://www.slideshare.net/BrooklynZelenka/relay-seamless-syncing-for-react-vanjs
Relay: Seamless Syncing for React (VanJS) - Download as a PDF or view online for free
- 165Relay - Daniel Dembach - Hamburg React.js Meetup
https://www.youtube.com/watch?v=dvWTxy1eY6s
A recording taken during the meetup of the react.js hamburg group:http://www.meetup.com/Hamburg-React-js-Meetup/events/225186254/
- 166Build software better, together
https://github.com/rmosolgo/graphql-relay-ruby
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 167Build software better, together
https://github.com/graphql/graphiql.
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 168an chat example showing Relay with routing and pagination
https://github.com/transedward/relay-chat
an chat example showing Relay with routing and pagination - hungtuchen/relay-chat
- 169Create Relay connections from MongoDB cursors
https://github.com/mikberg/relay-mongodb-connection
Create Relay connections from MongoDB cursors. Contribute to heysailor/relay-mongodb-connection development by creating an account on GitHub.
- 170Build software better, together
https://github.com/codefoundries/UniversalRelayBoilerplate
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.
- 171Getting Started with Relay
https://auth0.com/blog/2015/10/06/getting-started-with-relay/
Learn how to get started with a Relay app and how to protect the GraphQL endpoint with JWT authentication.
- 172š„ Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, and Joy UI.
https://github.com/kriasoft/nodejs-api-starter
š„ Monorepo template (seed project) pre-configured with GraphQL API, PostgreSQL, React, and Joy UI. - kriasoft/graphql-starter-kit
- 173React with Relay and GraphQL with Andrew Smith
https://www.youtube.com/watch?v=Cfna8gwt9h8
Andrew Smith presents GraphQL in relation to React and Relay.
- 174ReactRelayNetworkLayer with middlewares and query batching for Relay Classic.
https://github.com/nodkz/react-relay-network-layer
ReactRelayNetworkLayer with middlewares and query batching for Relay Classic. - relay-tools/react-relay-network-layer
- 175Create a GraphQL HTTP server with Koa.
https://github.com/chentsulin/koa-graphql
Create a GraphQL HTTP server with Koa. Contribute to graphql-community/koa-graphql development by creating an account on GitHub.
- 176Make Relay work with React Native out of the box Ā· Issue #26 Ā· facebook/relay
https://github.com/facebook/relay/issues/26
The remaining steps are: Relay/React Native/fbjs versioning Use the appropriate unstableBatchedUpdates depending on React/React Native Version of fetch polyfill for React Native Document the use of...
- 177useHooks āĀ The React Hooks Library
https://usehooks.com/
A collection of modern, server-safe React hooks āĀ from the ui.dev team
- 178Making Sense of React Hooks
https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
This week, Sophie Alpert and I presented the āHooksā proposal at React Conf, followed by a deep dive from Ryan Florence:
- 179not magic, just arrays
https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e
Untangling the rules around the proposal using diagrams
- 180Color Match - CodeSandbox
https://codesandbox.io/s/jjy215l7w3
Color Match by tannerlinsley using d3-ease, emotion, mo-js, raf, react, react-dom, react-emotion, react-scripts
- 181Counter using useState of React Hooks - CodeSandbox
https://codesandbox.io/s/yjn90lzwrx?module=%2Fsrc%2FApp.js
Create a Counter using React Hooks with useState
- 182CodeSandbox
https://codesandbox.io/s/m449vyk65x
CodeSandbox is an online editor tailored for web applications.
- 183ppxnl191zx - CodeSandbox
https://codesandbox.io/s/ppxnl191zx
ppxnl191zx using lodash, react, react-dom, react-scripts, react-spring
- 184React Hooks for GraphQL
https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62
How to create custom React hooks to handle common GraphQL operations.
- 185Hooks in react-spring, a tutorial
https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4
Yesterday the React-team finally unveiled their vision of a class-less future in React. Today weāre going to take a look at how to useā¦
- 186Using the State Hook ā React
https://reactjs.org/docs/hooks-state.html
A JavaScript library for building user interfaces
- 187Using the Effect Hook ā React
https://reactjs.org/docs/hooks-effect.html
A JavaScript library for building user interfaces
- 188Hooks Todo App - CodeSandbox
https://codesandbox.io/s/9kwyzy0y4
Example app for this post: \n\nhttps://blog.blackbox-vision.tech/making-a-beautiful-todo-app-using-react-hooks-material-ui
- 189useState() and useEffect() - CodeSandbox
https://codesandbox.io/s/yq5qowzrvz
React Hooks: useState() and useEffect() by chris-sev using react, react-dom, react-scripts
- 190Building Your Own Hooks ā React
https://reactjs.org/docs/hooks-custom.html
A JavaScript library for building user interfaces
- 191Rules of Hooks ā React
https://reactjs.org/docs/hooks-rules.html
A JavaScript library for building user interfaces
- 192Introducing Hooks ā React
https://reactjs.org/docs/hooks-intro.html
A JavaScript library for building user interfaces
- 193Everything you need to know about React Hooks
https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349
React just announced a new feature: Hooks. Itās a brand new set of APIs that enables powerful new ways to share stateful logic betweenā¦
- 194Hooks at a Glance ā React
https://reactjs.org/docs/hooks-overview.html
A JavaScript library for building user interfaces
- 195Hooks FAQ ā React
https://reactjs.org/docs/hooks-faq.html
A JavaScript library for building user interfaces
- 196Hooks API Reference ā React
https://reactjs.org/docs/hooks-reference.html
A JavaScript library for building user interfaces
- 197React Hooks and Suspense
https://egghead.io/playlists/react-hooks-and-suspense-650307f2
React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more ...
- 198Primer on React Hooks
https://testdriven.io/blog/react-hooks-primer/
An introduction to React Hooks.
- 199React Hook to track the visibility of a functional component
https://github.com/AvraamMavridis/react-intersection-visible-hook
React Hook to track the visibility of a functional component - AvraamMavridis/react-intersection-visible-hook
- 200Manage global state with React Hooks
https://medium.com/@Charles_Stover/manage-global-state-with-react-hooks-6065041b55b4
Since the announcement of experimental Hooks in React 16.7, they have taken the React community by storm.
- 201Managing Web Sockets with useEffect and useState
https://medium.com/@rossbulat/react-hooks-managing-web-sockets-with-useeffect-and-usestate-2dfc30eeceec
Rundown of React Hooks and applying them to a real-time chat room simulation
- 202React Hooks - A deeper dive featuring useContext and useReducer
https://testdriven.io/blog/react-hooks-advanced/
This article looks at how React JS hooks can be used to make React applications and their state management clean and efficient.
- 203jacobp100/hooks-test
https://github.com/jacobp100/hooks-test
Contribute to jacobp100/hooks-test development by creating an account on GitHub.
- 204A set of reusable React Hooks.
https://github.com/beizhedenglong/react-hooks-lib
A set of reusable React Hooks. Contribute to beizhedenglong/react-hooks-lib development by creating an account on GitHub.
- 205Determining screen size type for Bootstrap 4 grid.
https://github.com/pankod/react-hooks-screen-type
Determining screen size type for Bootstrap 4 grid. - pankod/react-hooks-screen-type
- 206A collection of useful React hooks
https://github.com/kitze/react-hanger
A collection of useful React hooks . Contribute to kitze/react-hanger development by creating an account on GitHub.
- 207React Hooks for Firebase.
https://github.com/csfrequency/react-firebase-hooks
React Hooks for Firebase. Contribute to CSFrequency/react-firebase-hooks development by creating an account on GitHub.
- 208[OUTDATED]Ponyfill for the React Hooks API (Support RN)
https://github.com/yesmeck/react-with-hooks
[OUTDATED]Ponyfill for the React Hooks API (Support RN) - yesmeck/react-with-hooks
- 209React's Hooks API implemented for web components š»
https://github.com/matthewp/haunted
React's Hooks API implemented for web components š» - matthewp/haunted
- 210A timer hook for React
https://github.com/thibaultboursier/use-timer
A timer hook for React. Contribute to thibaultboursier/use-timer development by creating an account on GitHub.
- 211React Hooks ā š
https://github.com/streamich/react-use
React Hooks ā š. Contribute to streamich/react-use development by creating an account on GitHub.
- 212Web. Components. š
https://github.com/palmerhq/the-platform
Web. Components. š. Contribute to jaredpalmer/the-platform development by creating an account on GitHub.
- 213š© A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte
https://github.com/storeon/storeon
š© A tiny (185 bytes) event-based Redux-like state manager for React, Preact, Angular, Vue, and Svelte - storeon/storeon
- 214Use immer to drive state with a React hooks
https://github.com/mweststrate/use-immer
Use immer to drive state with a React hooks. Contribute to immerjs/use-immer development by creating an account on GitHub.
- 215React hook for conveniently use Fetch API
https://github.com/ilyalesik/react-fetch-hook
React hook for conveniently use Fetch API. Contribute to ilyalesik/react-fetch-hook development by creating an account on GitHub.
- 216React hooks implementation of Google's "Thanos" easter egg
https://github.com/codeshifu/react-thanos
React hooks implementation of Google's "Thanos" easter egg - luqmanoop/react-thanos
- 217Learn Advanced React Hooks workshop
https://github.com/kentcdodds/advanced-react-hooks
Learn Advanced React Hooks workshop. Contribute to kentcdodds/advanced-react-hooks development by creating an account on GitHub.
- 218React hooks for convenient react-navigation use
https://github.com/react-navigation/react-navigation-hooks
React hooks for convenient react-navigation use. Contribute to react-navigation/hooks development by creating an account on GitHub.
- 219React Native APIs turned into React Hooks for use in functional React components
https://github.com/react-native-community/react-native-hooks
React Native APIs turned into React Hooks for use in functional React components - react-native-community/hooks
- 220š React Hooks for form state management and validation (Web + React Native)
https://github.com/bluebill1049/react-hook-form
š React Hooks for form state management and validation (Web + React Native) - react-hook-form/react-hook-form
- 221React Hook for accessing state and dispatch from a Redux store
https://github.com/facebookincubator/redux-react-hook
React Hook for accessing state and dispatch from a Redux store - facebookarchive/redux-react-hook
- 222Use React Hooks for `connect` by markerikson Ā· Pull Request #1065 Ā· reduxjs/react-redux
https://github.com/reduxjs/react-redux/pull/1065
This PR builds on the previous React-Redux version 6 preview work from #898, #995, aand #1000 . As with the previous couple PRs, the major changes are: Switching from legacy context to createCont...
- 223React Today and Tomorrow and 90% Cleaner React With Hooks
https://www.youtube.com/watch?v=dpw9EHDh2bM
The first three talks from React Conf 2018 by Sophie Alpert, Dan Abramov, and Ryan Florence.Learn more about Hooks at https://reactjs.org/hooks.
- 224š¶ React hook for making isomorphic http requests
https://github.com/alex-cory/react-usefetch
š¶ React hook for making isomorphic http requests. Contribute to ava/use-http development by creating an account on GitHub.
- 225Stepping through React code
https://youtu.be/JQeB9miT9Wc
I'm trying to figure out the best way to simplify testing of React components with react-testing-library.
- 226Using Immer with Reducers and React Hooks
https://youtu.be/FmKjwh34Rn8
Learn how to simplify your reducers with Immer and integrate it with React Hooks.Code: https://github.com/benawad/react-hooks-examples/tree/4_immerLinks from...
- 227Using React Hooks vs. Class Components
https://youtu.be/vbaIZ3xMj9U
I'm planning on using both React Hooks and Class Components.Code: https://github.com/benawad/react-hooks-examples/tree/3_performance_useReducerLinks from vid...
- 228Are React Hooks Slower than Class Components?
https://youtu.be/tKRWuVOEB2w
React Hooks are not slower than Class Components.Starting Code: https://github.com/benawad/react-hooks-examples/tree/1_todolist_useStateFinished Code: https:...
- 229Building a Todo List with React Hooks useState
https://youtu.be/cAZ-fOd1RpA
A walkthrough of building a Todo List with React Hooks. Specifically, useState.Code: https://github.com/benawad/react-hooks-examples/tree/1_todolist_useState...
- 230Fetching Data from an API with React Hooks useEffect
https://youtu.be/k0WnY0Hqe5c
Learn how to fetch data from an API using React Hooks useEffect.Code: https://github.com/benawad/react-hooks-examples/tree/2_api_useEffectLinks from video:ht...
- 231React Hooks useContext
https://youtu.be/xWXxkFzgnFM
Learn how to use the React Context API with function components. Using the useContext React Hook.Code: https://github.com/benawad/react-hooks-examples/tree/5...
- 232My Thoughts on React Hooks
https://youtu.be/gmF4k6P2va8
React Hooks is coming in React 16.7 Links from video:https://reactjs.org/docs/hooks-intro.html----If you like cooking, checkout my side project: https://www....
Related Articlesto learn about angular.
- 1Getting Started with React.js: Building Your First App
- 2JSX in React.js: The Gap Between JavaScript and HTML
- 3React Hooks: UseState, UseEffect, and More
- 4Building Reusable Components in React.js: Best Practices Guide
- 5State Management in React.js: Context API vs Redux
- 6Redux Toolkit in React.js: State Management for Complex Applications
- 7Connecting React.js with a REST API: Guide to Fetching Data
- 8Building Real-Time Applications with React and WebSockets
- 9Boosting React.js Performance: Code Splitting and Lazy Loading
- 10Setting Up React.js with TypeScript
FAQ'sto learn more about Angular JS.
mail [email protected] to add more queries here š.
- 1
what are react js components
- 2
how to implement azure ad authentication in react js
- 3
how react js is different from angularjs
- 4
where can i find webpack.config.js in react
- 5
is react faster than javascript
- 6
is react similar to javascript
- 7
is react really necessary
- 8
what will replace react js
- 9
how to call api in react js
- 10
will solid js replace react
- 11
what is routing in react js
- 12
how long would it take to learn react js
- 13
why is react better than javascript
- 14
what are the important topics in react js
- 15
who uses react js
- 16
how to create an app in react js
- 17
can i learn next js without react
- 19
how much it will take to learn react js
- 20
does react js require node js
- 21
how to create app in react js
- 22
why would you use react
- 23
does a react component have to return jsx
- 24
is react worth it
- 25
how to install react js
- 26
is react.js hard to learn
- 27
how react js works
- 28
does react js need node js
- 29
when to use react js
- 30
why react js used
- 31
how to do react js
- 32
is react js free
- 33
who created react
- 34
what is redux in react js
- 35
how long it will take to learn react js
- 36
what we have to learn before react js
- 37
what language does react js use
- 38
how to get data by id in react js
- 39
is react js functional programming
- 40
why react js is faster
- 41
when react js was introduced
- 42
where react js is used
- 43
what is a side effect react
- 44
what is hooks in react js
- 45
does react js use html
- 46
how to install react js in windows
- 47
why react js is a library
- 48
why react js is so popular
- 49
what is component will mount in react js
- 50
who developed react js
- 51
what should i learn before react js
- 52
are react js and react native same
- 53
what are the prerequisites to learn react js
- 54
what is props in react js
- 55
does react js use typescript
- 56
should i use js or jsx in react
- 57
will reactjs die
- 58
is react js dying
- 59
is react losing popularity
- 60
how to call an api in react js
- 61
is react outdated
- 62
- 63
how to do routing in react js
- 64
should i use next js or react
- 65
what react js do
- 66
is react js a framework
- 67
what is react js in hindi
- 68
what does react js do
- 69
what react js is used for
- 70
where to start react js
- 71
do you need node js for react
- 72
what is context api in react js
- 73
how to create dynamic id in react js
- 74
which react framework is best
- 75
what is react side effects
- 76
where we use react js
- 77
will next js replace react
- 78
why should we use react js
- 79
what are the features of react js
- 80
what are react js hooks
- 81
does react js have future
- 82
where is webpack.config.js in react
- 83
why react js is important
- 84
how to get dynamic id in react js
- 85
does react.js create a virtual dom in the memory
- 86
can react js be used for backend
- 87
when was react js created
- 88
where is react-native.config.js
- 89
where to learn react js
- 90
is react js easy to learn
- 91
when to learn react js
- 92
is react javascript
- 93
how to do form validation in react js
- 94
what does strict mode do in react js
- 95
what are states in react js
- 96
will vue js overtake react
- 97
how does react js work
- 98
how to learn react js
- 99
how to do unit testing in react js
- 100
why react js is declarative
- 101
what are props in react js
- 102
how to create an api in react js
- 103
would react be dead
- 104
how to create an array in react js
- 105
is react js frontend or backend
- 106
how to use navigate in react js
- 107
what is state in react js
- 108
how to create an object in react js
- 109
is react js still relevant
- 110
should i learn next js or react
- 111
how to fetch data using id in react js
- 112
how to pass dynamic id in react js
- 113
why react js is better than angular
- 114
how much js should i know to learn react
- 115
how to do pagination in react js
- 116
where to code react js
- 117
do you have to use react with jsx
- 118
is react js a framework or library
- 119
can react js be used for mobile apps
- 120
why react js is popular
- 121
how to add image in react js
- 122
who owns react js
- 123
what should i learn after react js
- 124
who developed react
- 125
why do we use react js
- 126
is react js in demand
- 127
which companies use react
- 128
what are react js and node js
- 129
is react js a language
- 130
what is jsx in react
- 131
why react js is better
- 132
who created react js
- 133
when to use next js over react
- 134
how react js works internally
More Sitesto check out once you're finished browsing here.
https://www.0x3d.site/
0x3d is designed for aggregating information.
https://nodejs.0x3d.site/
NodeJS Online Directory
https://cross-platform.0x3d.site/
Cross Platform Online Directory
https://open-source.0x3d.site/
Open Source Online Directory
https://analytics.0x3d.site/
Analytics Online Directory
https://javascript.0x3d.site/
JavaScript Online Directory
https://golang.0x3d.site/
GoLang Online Directory
https://python.0x3d.site/
Python Online Directory
https://swift.0x3d.site/
Swift Online Directory
https://rust.0x3d.site/
Rust Online Directory
https://scala.0x3d.site/
Scala Online Directory
https://ruby.0x3d.site/
Ruby Online Directory
https://clojure.0x3d.site/
Clojure Online Directory
https://elixir.0x3d.site/
Elixir Online Directory
https://elm.0x3d.site/
Elm Online Directory
https://lua.0x3d.site/
Lua Online Directory
https://c-programming.0x3d.site/
C Programming Online Directory
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
https://r-programming.0x3d.site/
R Programming Online Directory
https://perl.0x3d.site/
Perl Online Directory
https://java.0x3d.site/
Java Online Directory
https://kotlin.0x3d.site/
Kotlin Online Directory
https://php.0x3d.site/
PHP Online Directory
https://react.0x3d.site/
React JS Online Directory
https://angular.0x3d.site/
Angular JS Online Directory