Mireco is an extensible library for user interfaces with no heavy dependencies (especially css).
"The golden teaspoon of date pickers"
- Luke Hodkinson
It intends to be a simple example html implementation of a React interface that adheres to the
following guidelines:
value and onChangeonChange is a function callback with the new value as an argument (consumers do no
direct reading from dom elements with refs)milliseconds from utc epoch. Any localisation should
be performed in your own wrapper components. Similarly, all durations are in millisecondsCheckbox component uses a convenience label="label contents" prop instead of requiring
<Label><Checkbox/> label contents</Label>Non battle-tested guidelines:
style and className should be passed through - with prefixes
where there are multiple injection points eg. containerStyle and inputStylestyle prop refers to the outermost container of a Mireco component. More specific style
overrides are given with explicit references eg. inputStyle and labelStyle. Where these
overlap and refer to the same element as the style prop, they are merged with the more specific
name taking precedent.All Mireco components should be designed with the following in mind:
svg so they support css styling,
only use native fonts<div>html form valuerem (except for em for line-heights relative to font-size)inline or inline-block by
default. For convenience, the Mireco api provides a block version of all inputs eg.
Mireco.block.checkbox versus Mireco.checkboxNon battle-tested guidelines:
flex-wraping and min-width), as opposed to with screen sized media
queriesInstall the package from npm:
npm install mireco
Make sure your html document is encoded properly (required by parse-duration micro symbol):
<html>
<head>
<meta charset="utf-8">
</head>
</html>
Add the component stylesheet:
<link rel="stylesheet" href="node_modules/mireco/dist/mireco-components.css" />
To support inputs that have modal dropdowns, ensure that the body of your document (and any
absolutely positioned content blocks such as modals) all have a padding of at least 15rem at the
bottom.
Basic form inputs:
Compound form inputs:
Layout:
Having properly bound components in React is tricky when the components that the user needs to interact with are required to sometimes be in invalid states.
The best example of this is a date selector with a text input component - if a user is typing in a
value of 31/3/2012, between each keystroke the value when parsed could either be completely
different (31/3 would resolve to the current year) or invalid (31 would be of the current month
which does not necessarily contain 31 days).
Most packages get around this with a variety of strategies that have their own drawbacks:
All Mireco components should instead follow this flow of value update:
undefined means that a true value cannot in any way be understood from the
various state contentsnull means that the value is explicitly set to nothingtrue value (of whatever data type is appropriate for your input, eg. milliseconds integer)
is reported when the value can be parsed with the most generous rules possible (does not have to
be perfect)prop value, it is compared to the current various state contents. If it has changed:
prop value is set to undefined, do absolutely nothingprop value is set to a true value or null:
various state contents:
various state contents to a perfectly formatted representation of the new
prop value, as this means the parent has explicitly overridden our valueprop value is set to a true value:
various state contents to a perfectly formatted representation of the prop valuevarious state contents to defaultsFollowing this flow, self-initiated updates of value are non destructive to the current state whilst
still allowing the parent to change its value. Also, as undefined and null are often
interchangeable you can simply take the given value onChange without any validation or workflow
in Mireco consumers.
FAQs
MIcro REact COmponents - extensible library for interfaces with no heavy deps
The npm package mireco receives a total of 2,891 weekly downloads. As such, mireco popularity was classified as popular.
We found that mireco demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."