property-information
Advanced tools
The property-information npm package provides utilities for working with HTML and SVG properties, attributes, and their corresponding information. It helps in understanding the relationships between properties and attributes, and how they should be used in the context of HTML and SVG elements.
Get Property Information
This feature allows you to retrieve detailed information about a specific property or attribute. In this example, we are fetching information about the 'className' property.
const propertyInformation = require('property-information');
const info = propertyInformation.find('className');
console.log(info);Check if Property is Boolean
This feature helps you determine if a property is a boolean attribute. In this example, we check if the 'checked' property is a boolean.
const propertyInformation = require('property-information');
const isBoolean = propertyInformation.boolean.includes('checked');
console.log(isBoolean);Get All Properties for a Specific Element
This feature provides all properties and attributes for HTML elements. In this example, we retrieve all properties related to HTML elements.
const propertyInformation = require('property-information');
const properties = propertyInformation.html;
console.log(properties);The html-element-attributes package provides a comprehensive list of HTML element attributes and their corresponding information. It is similar to property-information but focuses solely on HTML attributes without SVG support.
The html-attributes package offers a list of standard HTML attributes and their details. It is similar to property-information but does not provide as detailed information about the relationships between properties and attributes.
The svg-element-attributes package provides information about SVG element attributes. It is similar to property-information but focuses exclusively on SVG attributes.
Information for properties and attributes on the web-platform (HTML, SVG, ARIA, XML, XMLNS, XLink).
npm:
npm install property-information
var info = require('property-information')
console.log(info.find(info.html, 'className'))
// Or: info.find(info.html, 'class')
console.log(info.find(info.svg, 'horiz-adv-x'))
// Or: info.find(info.svg, 'horizAdvX')
console.log(info.find(info.svg, 'xlink:arcrole'))
// Or: info.find(info.svg, 'xLinkArcRole')
console.log(info.find(info.html, 'xmlLang'))
// Or: info.find(info.html, 'xml:lang')
console.log(info.find(info.html, 'ariaValueNow'))
// Or: info.find(info.html, 'aria-valuenow')
Yields:
{ space: 'html',
attribute: 'class',
property: 'className',
spaceSeparated: true }
{ space: 'svg',
attribute: 'horiz-adv-x',
property: 'horizAdvX',
number: true }
{ space: 'xlink', attribute: 'xlink:arcrole', property: 'xLinkArcrole' }
{ space: 'xml', attribute: 'xml:lang', property: 'xmlLang' }
{ attribute: 'aria-valuenow', property: 'ariaValueNow', number: true }
propertyInformation.find(schema, name)Look up info on a property.
In most cases, the given schema contains info on the property.
All standard, most legacy, and some non-standard properties are supported.
For these cases, the returned Info has hints about value of the
property.
name can be a valid data attribute or property, in which case an
Info object with the correctly cased attribute and property is
returned.
name can be an unknown attribute, in which case an Info object
with attribute and property set to the given name is returned.
It is not recommended to provide unsupported legacy or recently specced
properties.
schema (Schema)
— Either propertyInformation.html or propertyInformation.svgname (string)
— An attribute-like or property-like name that is passed through
normalize to find the correct infoInfo.
find can be accessed directly from require('property-information/find') as
well.
Aside from the aforementioned example, which shows known HTML, SVG, XML, XLink, and ARIA support, data properties and attributes are also supported:
console.log(info.find(info.html, 'data-date-of-birth'))
// Or: info.find(info.html, 'dataDateOfBirth')
Yields:
{ attribute: 'data-date-of-birth', property: 'dataDateOfBirth' }
Unknown values are passed through untouched:
console.log(info.find(info.html, 'un-Known'))
Yields:
{ attribute: 'un-Known', property: 'un-Known' }
propertyInformation.normalize(name)Get the cleaned case-insensitive form of an attribute or a property.
This removed all non-alphanumerical characters from name, and lowercases
the result.
name (string) — An attribute-like or property-like namestring that can be used to look up the properly cased property in a
Schema.
normalize can be accessed directly from
require('property-information/normalize') as well.
info.html.normal[info.normalize('for')] // => 'htmlFor'
info.svg.normal[info.normalize('VIEWBOX')] // => 'viewBox'
info.html.normal[info.normalize('unknown')] // => undefined
propertyInformation.htmlpropertyInformation.svgSchema for either HTML or SVG, containing info on properties from
the primary space (HTML or SVG) and related embedded spaces (ARIA, XML, XMLNS,
XLink).
html and svg can be accessed directly from
require('property-information/html') and require('property-information/svg')
as well.
console.log(info.html.property.htmlFor)
console.log(info.svg.property.viewBox)
console.log(info.html.property.unknown)
Yields:
{ space: 'html',
attribute: 'for',
property: 'htmlFor',
spaceSeparated: true }
{ space: 'svg', attribute: 'viewBox', property: 'viewBox' }
undefined
SchemaA schema for a primary space.
space ('html' or 'svg') — Primary space of the schemanormal (Object.<string>) — Object mapping normalized attributes and
properties to properly cased propertiesproperty (Object.<Info>) — Object mapping properties to infoInfoInfo on a property.
space ('html', 'svg', 'xml', 'xlink', 'xmlns', optional)
— Space of the propertyattribute (string) — Attribute name for the property that could be used
in markup (for example: 'aria-describedby', 'allowfullscreen',
'xml:lang', 'for', or 'charoff')property (string) — JavaScript-style camel-cased name, based on the
DOM, but sometimes different (for example: 'ariaDescribedBy',
'allowFullScreen', 'xmlLang', 'htmlFor', 'chOff')boolean (boolean) — The property is boolean.
The default value of this property is false, so it can be omittedbooleanish (boolean) — The property is a boolean.
The default value of this property is something other than false, so
false must persist.
The value can hold a string (as is the case with ariaChecked and its
'mixed' value)overloadedBoolean (boolean) — The property is boolean.
The default value of this property is false, so it can be omitted.
The value can hold a string (as is the case with download as its value
reflects the name to use for the downloaded file)number (boolean) — The property is number.
These values can sometimes hold a stringspaceSeparated (boolean) — The property is a list separated by spaces
(for example, className)commaSeparated (boolean) — The property is a list separated by commas
(for example, srcSet)commaOrSpaceSeparated (boolean) — The property is a list separated by
commas or spaces (for example, strokeDashArray)mustUseProperty (boolean) — If a DOM is used, setting the property
should be used for the change to take effect (this is true only for
'checked', 'multiple', 'muted', and 'selected')web-namespaces
— List of web namespacesspace-separated-tokens
— Parse/stringify space-separated tokenscomma-separated-tokens
— Parse/stringify comma-separated tokenshtml-tag-names
— List of HTML tagsmathml-tag-names
— List of MathML tagssvg-tag-names
— List of SVG tagshtml-void-elements
— List of void HTML tag-namessvg-element-attributes
— Map of SVG elements to allowed attributeshtml-element-attributes
— Map of HTML elements to allowed attributesaria-attributes
— List of ARIA attributesDerivative work based on React licensed under BSD-3-Clause-Clear, © 2013-2015, Facebook, Inc.
FAQs
Info on the properties and attributes of the web platform
The npm package property-information receives a total of 7,257,144 weekly downloads. As such, property-information popularity was classified as popular.
We found that property-information demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.