Device agnostic styles, components & hooks for React apps.
MIT License
Device agnostic styles, components and hooks for React apps — deviceagnosticui.com. One design for any viewport (size, orientation, resolution), input method (touch, mouse) or network speed. Simple to build, test and use.
:focus
styles.:root
essentials.<Html>
component to style rendered Markdown.For Node.js, to install device-agnostic-ui
and its react
peer dependency with npm, run:
npm install device-agnostic-ui react
For Deno and browsers, an example import map:
{
"imports": {
"class-name-prop": "https://unpkg.com/[email protected]/classNameProp.mjs",
"device-agnostic-ui/": "https://unpkg.com/[email protected]/",
"react": "https://esm.sh/[email protected]"
}
}
These dependencies might not need to be in the import map, depending on what device-agnostic-ui
modules the project imports from:
Theme, global, component, and syntax highlighting styles are exported in vanilla CSS files that must be manually loaded in your app, as necessary.
Supported runtime environments:
^14.17.0 || ^16.0.0 || >= 18.0.0
.> 0.5%, not OperaMini all, not dead
.Non Deno projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check
comment:
compilerOptions.allowJs
should be true
.compilerOptions.maxNodeModuleJsDepth
should be reasonably large, e.g. 10
.compilerOptions.module
should be "node16"
or "nodenext"
.The npm package device-agnostic-ui
features optimal JavaScript module design. It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported. These ECMAScript modules and CSS files are exported via the package.json
field exports
:
Blockquote.css
Blockquote.mjs
Button.css
Button.mjs
ButtonSubmit.css
ButtonSubmit.mjs
Code.css
Code.mjs
Fieldset.css
Fieldset.mjs
global.css
Heading.css
Heading.mjs
Html.css
Html.mjs
Icon.css
Icon.mjs
IconTick.mjs
LinkCard.css
LinkCard.mjs
LinkNav.css
LinkNav.mjs
LinkText.css
LinkText.mjs
ListOrdered.css
ListOrdered.mjs
ListUnordered.css
ListUnordered.mjs
Loading.css
Loading.mjs
Margin.css
Margin.mjs
Nav.css
Nav.mjs
package.json
Para.css
Para.mjs
Picture.css
Picture.mjs
Pre.css
Pre.mjs
Scroll.css
Scroll.mjs
Select.css
Select.mjs
splitWordBreaks.mjs
syntax-highlighting-prism.css
Table.css
Table.mjs
Textbox.css
Textbox.mjs
theme.css
Toggle.css
Toggle.mjs
useCustomValidity.mjs
useMergedRef.mjs
useOnFocusReportValidity.mjs
WordBreaks.mjs