Renum

Description

Another React component library with two unique traits: no unnecessary dependencies and a small package size.

Getting started

Install

yarn add @enumiton/renum

Usage

All components make use of the em/rem units, this means you can easily make any components larger or smaller by changing the font-size of the component or its parent.

import { Button } from '@enumiton/renum';
import '@enumiton/renum/es/styles/renum.less';

function App() {
	return (
		<Button type="primary">
			Hello world
		</Button>
	);
}

Also don't forget to use the RenumProvider component and its localization. You can import different locales from @enumiton/renum/es/locale/ or make your own by using the Locale type and passing it to the locale prop.

import { RenumProvider } from '@enumiton/renum';
import locale from '@enumiton/renum/es/locale/en-us';

function App() {
	return (
		<RenumProvider locale={ locale }>
			{/* … */ }
		</RenumProvider>
	);
}

Styles

All styles can be import from @enumiton/renum/es/styles/renum.css|less, although this isn't recommended for obvious reasons.

A better option is to import the themes from @enumiton/renum/es/styles/themes.less, optionally import a styles normalizer from @enumiton/renum/es/styles/normalize.less and then import all component specific styles dynamically using a library like vite-plugin-style-import.

Types

Since renum is written entirely in TypeScript it has types out-of-the-box.

Though I don't recommend it, you could still use this library with JavaScript. Since props/values are only validated using TypeScript you will run into issues with JavaScript. I will not fix any issues related to wrong props/values being passed through components in JavaScript.

Icons

⚠️ The icon pack will likely be split into its own NPM package due to its install size.

All the icons are from Tabler Icons, a project which provides free and open source icons created by Paweł Kuna.

The icons have already been optimized using svgo so you don't have to.

Usage

Icons are imported from @enumiton/renum/icons. All icons are in seperate files to make tree shaking easy.

import { Button } from '@enumiton/renum';
import { Menu } from '@enumiton/renum/icons';

function App() {
	return (
		<Button
			icon={ <Menu /> }
			type="text"
			shape="circle"
			aria-label="Open menu"
		/>
	);
}

Accessibility

As someone who cares about accessibility, I've made sure that the components of Renum are as accessible as possible. However, this doesn't mean your website will automatically be accessible by just using this library.

When making your website you'll still have to consider accessibility, like giving an input a label. If you're struggling to make something accessible feel free to open an issue in this repository asking for help, if I have time I could give it a look.

Contributing

Todo

Development

Install

$ git clone [email protected]:enumiton/renum.git
$ cd renum
$ yarn
$ yarn icons

Usage

yarn dev

Building

yarn build