Tâmia
Tâmia is a tiny React component library with themable primitives that you can use to quickly start working on a new project.
Based on
Tools
There are a few other things made specifically for Tâmia:
- tamia-gatsby-link: Render Gatsby
Linkcomponent with Tâmia styles - eslint-config-tamia: ESLint config
Documentation
Getting started
- Install Tâmia and peer dependencies:
npm install tamia styled-components
- Create a theme.
Copy the default theme to src/theme.tsx and modify it according to your taste:
- Type your theme.
Create src/styled.d.ts and import there your theme:
import theme from './theme';
type ThemeInterface = typeof theme;
declare module 'styled-components' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends ThemeInterface {}
}
- Wrap your app in a root container:
import React from 'react';
import { TamiaRoot } from 'tamia';
import theme from './theme';
const Root = ({ children }) => (
<TamiaRoot theme={theme}>{children}</TamiaRoot>
);
export default Root;
The Name
Tâmia is a chipmunk in Portuguese. It refers to Squirrelstrap, my love of small cheeky creatures and “Chip ’n Dale Rescue Rangers” (which is exactly framework’s aim).
History
Tâmia has evolved from a folder on my disk with a few CSS and JS files that I copypasted to every new project in 2000s. Notable iterations are:
- Grunt + Stylus + jQuery (2013)
- Webpack + browser-sync + ES6/Babel + Web Components + Stylus (2016)
- Webpack 2 + browser-sync + PostCSS + cssnext + CSS Modules + ES6/Babel (2017)
- React + Emotion + ES6/Babel (2018)
- React + styled-components + styled-system + TypeScript (2019)
License
The MIT License, see the included License.md file.