Getting started
If you already followed the Installation step, you have in your codebase a file that exports the morfeo
instance:
import { createMorfeo } from '@morfeo/web';
export const morfeo = createMorfeo({
/* */
});
This instance exposes 3 APIs:
morfeo.css
- the base API to generate stylesmorfeo.global
- creates global stylesmorfeo.component
- a single API to create components and stylize them - 🚨 React only (For now 😉)
morfeo.css
This API takes as a parameter an object of styles and returns a function:
import { morfeo } from '../morfeo';
const classes = morfeo.css({
container: {
p: 'm',
},
rounded: {
radius: 'm',
},
button: {
p: 's',
bg: 'primary',
color: 'white',
radius: 's',
},
});
function Card({ className, rounded = false }) {
return (
<div className={classes('container', rounded && 'rounded', className)}>
This is your first component made with Morfeo
<button className={classes('button')}>I like it 👍!</button>
</div>
);
}
the returned function can accept:
- a list of namespaces - the keys of the object of styles (Your IDE will suggest them 😉)
- any string (
className
in our example) that will be added to the list of classes. - a list of class objects
In this example, the returned classes would be something like:
classes('button'); // "p-s bg-primary color-white radius-s"
classes('container', rounded && 'rounded', 'additional class'); // "p-m radius-m additional class"
classes({
classObjectExample: {
p: 'p-m',
bg: 'bg-primary',
},
}); // "p-m bg-primary"
More about morfeo.css
The classes
function also exposes all the generated class objects:
classes.container; // { p: 'p-m' }
classes.button; // { p: 'p-s', bg: 'bg-primary', .... }
// Technically, valid syntax
classes(classes.container, classes.button);
You can read more about the morfeo.css
in the API section
morfeo.global
This function should be used to create global styles, in this case the style keys need to be valid CSS selectors, for instance:
import { morfeo } from '../morfeo';
morfeo.global({
body: {
margin: 'none',
padding: 'none',
fontFamily: 'default',
},
'#root': {
px: 'xl',
},
});
⚛️ morfeo.component
This function is for now supported only on React
, in fact in case @morfeo/react
is not installed, your IDE will not even suggest this function.
This API is made specifically to give the best DX to create components, here is a simple example:
import { morfeo } from '../morfeo';
export const Card = morfeo.component('div', {
p: 'm',
bg: 'white'
radius: 'l',
})
The snippet above is the equivalent of:
import { morfeo } from '../morfeo';
const classes = morfeo.css({
container: {
p: 'm',
bg: 'white'
radius: 'l',
}
});
export function Card({ className, children, ...rest }) {
return (
<div className={classes('container', className)}>
{children}
</div>
);
}
But is not only a way to reduce the number of lines, morfeo.component
can do way more stuff than morfeo.css
like:
- Accepting functions instead of plain values
- Automatically style the component through the
components
slice - Style external components
Function parameters
import { morfeo } from '../morfeo';
export const Card = morfeo.component('div', {
bg: props => props.background || 'white',
radius: 'm',
});
Referring Theme's Components
The first parameter of the morfeo.component
can be the name of the theme component, in this case, the style, the HTML tag and initial properties will be automatically taken from the theme:
import { morfeo } from '../morfeo';
export const Card = morfeo.component('Card', {
variant: props => props.variant,
});
Styling existing components
You can even pass an existing component as the first parameter, in this case, morfeo.component
will just pass to the wrapped component the className
and style
needed to style it accordingly:
import { morfeo } from '../morfeo';
import { Box } from './Box';
// Box needs to be a component that accepts `className` and `style`.
// Card will automatically infer the Props of Box
export const Card = morfeo.component(Box, {
bg: props => props.background || 'white',
radius: 'm',
});