You'll need to wrap your application with a context to use this library:
-
React:
// src/index.js import { ThemeProvider, defaultTheme, ResetCSS } from 'my-ui' function MyApp() { return( <ThemeProvider theme={defaultTheme}> <ResetCSS /> <Router /> <OtherComponents /> </ThemeProvider> ) } export default MyApp
-
Next:
// src/pages/_app.js import { ThemeProvider, defaultTheme } from 'my-ui' function MyApp({ Component, pageProps }) { return( <ThemeProvider theme={defaultTheme}> <ResetCSS /> <Component {...pageProps} /> </ThemeProvider> ) } export default MyApp
you should import Google's Inter font, which is the default font, in your <head/> tag:
<head>
...
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
...
</head>then you can use components like this:
// src/pages/foo.tsx
import React from 'react';
import { Input } from 'my-ui';
export default function Foo() {
return (
<Input label="Your Label" error="Foo"/>
);
}You can customize theme colors and add properties:
-
Adding new colors/properties:
import { defaultTheme } from 'my-ui'; const newTheme = { ...defaultTheme, foo: '#fff', baz: '#ABCDEF', };
-
Customizing existing props:
You can use DefaultTheme interface to view all properties of the theme.
import { defaultTheme } from 'my-ui'; const newTheme = { ...defaultTheme, textColor: '#F3F3F3', };
-
Typescript
If you're using Typescript maybe you should connect theme with styled-components:
-
If you're using legacy theme:
// src/@types/styled-components.d.ts import { BycodersTheme } from 'my-ui'; declare module 'styled-components' { export interface DefaultTheme extends BycodersTheme {} }
-
If you're using a custom theme:
// src/styles/newTheme.ts import { defaultTheme } from 'my-ui'; const newTheme = { ...defaultTheme, textColor: '#F3F3F3', };
// src/@types/styled-components.d.ts import { newTheme } from '../styles/newTheme'; type MyThemeType = typeof newTheme declare module 'styled-components' { export interface DefaultTheme extends MyThemeType {} }
-
This project is documented on Storybook. You'll need to clone the project and execute storybook:
yarn install
yarn storybookyarn installTo contribute, before merge your PR please run one of the following commands:
yarn bump-patch
yarn bump-minor
yarn bump-majorThen you can push it to repo:
OBS: DO NOT PUSH TAGS
git push origin <feature-branch>