Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
reactomikit
Advanced tools
#WIP: reactomikit
NOTE: This product is still under development, don't consider it near production use just yet
Minimal Atomic UI Toolkit for React and React Native
In the quest for a minimal footprint multi-platform styling architecture
npm i reactomikit -S
module.exports = {
...
resolve: {
alias: {
"ui-kit": "reactomikit/dist/ui-kit"
}
...
},
...
}
import UIKit from "ui-kit/examples";
<Router>
<Route component={ UIKit } path="ui-kit" />
</Router>
import { Button } from "ui-kit/button"
const LoginButton = () => (
<Button>Some button</Button>
);
export default LoginButton
This components lets us setup the elements that our app will use to render content, a sample structure of an app would be:
import React from 'react';
import { App, Topbar, View, Viewport, ScrollView } from 'reactomikit/layout';
const SampleApp = () => (
<App>
<Topbar>The Bar</Topbar>
<View>
<Viewport>Some text</Viewport>
<ScrollView width="50%" height="100vh" />
<ScrollView width="50%" height="100vh" />
</View>
</App>
);
export default SampleApp;
Available components:
In this category we will place all elements that are common to all applications, things like html tags and well defined elements like a Menu or the Logo, a sample snippet of how to achieve this would be:
import React from 'react';
import { Topbar } from '../layout';
import { Menu, Link, Logo } from '../base';
import logo from '../assets/logo.svg';
const TopbarExample = () => (
<Topbar>
<Logo src={logo} />
<Menu>
<Link>Theme</Link>
<Link>Helpers</Link>
<Link>Layout</Link>
<Link>Typography</Link>
<Link>Buttons</Link>
<Link>Buttons</Link>
</Menu>
</Topbar>
);
export default TopbarExample;
Available components:
As of Powered by styled-components
This package does 1 thing amazingly, it lets us package style primitives in well encapsulated stateless functions so we can use the full power of es6 and modern css to keep our UI's simple and scalable.
In other words, this is the first fully JS + CSS hybrid implementation I've seen and I have the feeling this is where things are going in terms of CSS evolution.
🙌🙏 To the team in charge of developing this
It lets us wrap native UI components in an easily swappable low-level API.
This is my personal attempt to solve the problems I see in css, usually I am used to see many developers struggle to understand how to approach working with CSS.
What may be
Just define the pattern, wrap it in a reusable function if you are using javascript or load the base stylesheet to consume it in different environments.
Makes it easier for UI designers to build Style libraries with ease, just learn CSS and extend the kit to start building applications blazingly fast.
Whenever approaching
npm run dev
dev-toolkit --watch
#Generate a static build
# Create
build-folder with compiled files (-b or --build) dev-toolkit --build
removes previous build-folder
automatically uses production-builds of React and Redux
allows for a custom vendor-bundle
extracts css from individual modules
hashes assets, including jpg, png, gif & svg-files
FAQs
Atomic UI React Toolkit
The npm package reactomikit receives a total of 8 weekly downloads. As such, reactomikit popularity was classified as not popular.
We found that reactomikit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.