Quick start

Quick start

1. Simple usage

Simple use, allows you to quickly use the block with the default settings

import React from 'react';
import { Text } from 'evokit-text';
import 'evokit-text/style.css';

const App = () => (
    <Text text-align='center'>
        Hello, world!
    </Text>
);

2. Advanced

Recommend using advanced mode. To do this, you will need to create a UI folder in the project where the configured blocks.

├── UI/
│   └── Text/
│   └───── index.js
│   └───── style.css
│   └───── vars.css
│   └── index.js
└── App.jsx

UI/Text/index.js

import { Text } from 'evokit-text';
import './style.css';

export { Text };

UI/Text/style.css

@import 'evokit-text/style.css';
@import './vars.css';

UI/Text/vars.css

:root {
    --ek-text-line-height: 1.4em;
}

UI/index.js

import { Text } from './Text';

export { Text };

UI/App.jsx

import React from 'react';
import { Text } from './UI';

const App = () => (
    <Text text-align='center'>
        Hello, world!
    </Text>
);

3. CSS Modules

Consider the same files structure as Advanced mode.

UI/Text/index.js

import { withProps } from 'evokit';
import { Text as EKText } from 'evokit-text';
import style from './style.css';

export const Text = withProps(EKText, {
    'text-preset': {
        css: style,
    },
});