@ef2/react
v1.1.20
Published
## Installation
Downloads
110
Keywords
Readme
@ef2-digital/react
Installation
Install the plugin from yarn:
yarn add @ef2-digital/react
This library is build with TypeScript, so type-definitions are shipped out-of-the-box.
Components
Documentation: Storybook.
Configuration
Quick start
Here's a quick example to get you started. Add ThemeProvider
to the top level of your app.
Tailwind:
yarn add -D tailwindcss postcss autoprefixer @headlessui/tailwindcss
npx tailwindcss init -p
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./theme.ts',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./node_modules/@ef2/react/lib/**/*.js'
],
plugins: [
require('@headlessui/tailwindcss')
]
}
React:
// App.js
import { ThemeProvider, Button } from "@ef2-digital/react";
const App = ({ children }) => {
return (
<ThemeProvider>
<Button>Button</Button>
</ThemeProvider>
);
};
Next.js:
// components/layout/DefaultLayout.tsx
import { ThemeProvider } from "@ef2-digital/react";
const DefaultLayout = ({ children }: PropsWithChildren) => {
return (
<ThemeProvider>
<main id="main">
{children}
</main>
</ThemeProvider>
);
};
Theming
By default all EF2 components lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Theme structure
export type Attribute<T = string> = { DEFAULT: T; [key: string]: T };
export type Variant = { DEFAULT: string; primary: string; [key: string]: string };
export interface Component {
variant: Attribute<Variant>;
}
export interface Button extends Component {
size: Attribute;
}
export interface Theme {
button: Button;
// ... other components.
}
Customize Theme
// theme.ts
// 1. Create a 'theme.ts' file.
import type { PartialTheme } from '@ef2-digital/react';
// 2. Define your theme.
const theme: PartialTheme = {
button: {
variant: {
DEFAULT: { primary: 'bg-orange-600 hover:bg-orange-700 focus:ring-orange-500' }
}
}
}
export default theme;
// components/layout/DefaultLayout.tsx
import { ThemeProvider } from "@ef2-digital/react";
import theme from 'theme' // your custom theme :D.
// 3. Pass the new theme to `ThemeProvider`
const DefaultLayout = ({ children }: PropsWithChildren) => {
return (
<ThemeProvider theme={theme}>
<main id="main">
{children}
</main>
</ThemeProvider>
);
};