0.4.1 • Published 12 months ago
@cos-ui/react v0.4.1
@cos-ui/react
Styled components for CoStudo Project
Getting started
- Install the package
$ npm install @cos-ui/react
- Set global style and theme provider
import { CosThemeProvider, CosStyle } from '@cos-ui/react';
const App = ({ Component, pageProps }: AppProps) => (
<CosThemeProvider>
<CosStyle />
{/* and more */}
</CosThemeProvider>
);
You have to create a declaration file styled.d.ts
.
import {} from 'styled-components/cssprop';
import { Theme } from '@cos-ui/react';
declare module 'styled-components' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
// This is only necessary if you have eslint complains.
export interface DefaultTheme extends Theme {}
}
If you add theme options, add them to custom
property.
// theme.ts
export type CustomTheme = {
highlight: string;
}
const customTheme: CustomTheme = {
highlight: '#ffcc00',
}
// styled.d.ts
declare module 'styled-components' {
export interface DefaultTheme extends Theme {
custom: CustomTheme;
}
}
// App.tsx
const App = ({ Component, pageProps }: AppProps) => (
<CosThemeProvider theme={customTheme}>
<CosStyle />
{/* and more */}
</CosThemeProvider>
);
If you want to add more style in your own global style, then use named export (lowercase).
import { createGlobalStyle } from 'styled-components';
import { cosStyle } from '@cos-ui/react';
const GlobalStyle = createGlobalStyle`
${cosStyle}
/* other style */
`;
- Import the parts
Import and structure the parts.
import { BasicTab } from '@cos-ui/react';
const BasicTabDemo = () => (
<BasicTab.Group>
<BasicTab.List>
<BasicTab>Tab A</BasicTab>
<BasicTab>Tab B</BasicTab>
</BasicTab.List>
<BasicTab.Panels>
<BasicTab.Panel>Tab Panel 1</BasicTab.Panel>
<BasicTab.Panel>Tab Panel 2</BasicTab.Panel>
</BasicTab.Panels>
</BasicTab.Group>
);
Demo
You can see demo of our components here!
0.4.1
12 months ago
0.4.0
1 year ago
0.3.2
1 year ago
0.3.3
1 year ago
0.3.0
1 year ago
0.3.1
1 year ago
0.2.5
1 year ago
0.2.4
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago