test
From small to very large React components. Build an application in no time.
Installation
// with yarn
yarn add @partsjs/test
//with npm
npm install @partsjs/test
If you don't already have peer dependencies installed, also run:
// with yarn
yarn add react react-dom
// with npm
npm install react react-dom
Usage
Use or create your own design system or use the default one with Tailwind.
Example with a default theme
First, install the default theme, based on the CSS classes from Tailwind.
// with yarn
yarn add @partsjs/test/tailwind-theme
// with npm
npm install @partsjs/test/tailwind-theme
Then use it in the app:
import React from 'react';
import PartsTypography from 'partjs/test/PartsTypography';
import { typographyCN } from 'partsjs/test/theme';
const Text = () => {
// some logic
return (
<div className="text">
<PartsTypography {...{ element: h2, className: typographyCN.h1 }} />
</div>
);
};
Example with your own configuration (you can use Tailwind but don't have to):
// theme/typography.js
const typographyCN = {
h1: 'h1',
h2: 'h2',
};
export default typographyCN;
// theme/index.js
export { typographyCN, buttonsCN } from '.';
import React from 'react';
import PartsTypography from 'partjs/test/PartsTypography';
import { typographyCN } from 'core/theme'; // import from your app
const Text = () => {
// some logic
return (
<div className="text">
<PartsTypography
{...{ element: h2, size: h1, className: typographyCN.h1 }}
/>
</div>
);
};
Do you want to style each component yourself according to classes describing each component? You can use the default CSS classes or specify their names yourself.
import React from 'react';
import Typography from 'partjs/test/Typography';
import theme from '
const typography
const Text = () => {
// some logic
return (
<div className="text">
<Typography {...{ element: h2, size: h1, hasDefaultClasses: true }} />
</div>
);
};