# @cos-ui/react

> Styled components for CoStudo

Latest version **0.4.1** (published 2023-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cos-ui/react
pnpm add @cos-ui/react
yarn add @cos-ui/react
bun add @cos-ui/react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2023-05-29 |
| First published | 2022-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 133.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | minagwak |

## Links

- npm: https://www.npmjs.com/package/@cos-ui/react
- Homepage: https://github.com/Co-Studo/cos-ui/tree/main/packages/react#readme
- npm.io page: https://npm.io/package/@cos-ui/react

## Dependencies (2)

- [styled-reset](https://npm.io/package/styled-reset.md) ^4.4.5
- [@cos-ui/primitives](https://npm.io/package/@cos-ui/primitives.md) ^0.4.1

## Recent versions

- 0.4.1 (latest) — 2023-05-29
- 0.4.0 — 2023-05-03
- 0.3.3 — 2023-03-23
- 0.3.2 — 2023-03-23
- 0.3.1 — 2023-02-10
- 0.3.0 — 2023-02-03
- 0.2.5 — 2023-01-19
- 0.2.4 — 2023-01-11
- 0.2.3 — 2022-12-12
- 0.2.2 — 2022-12-07
- 0.2.1 — 2022-12-05
- 0.2.0 — 2022-12-01
- 0.1.4 — 2022-11-30
- 0.1.3 — 2022-11-29
- 0.1.2 — 2022-11-24
- … 2 more at https://npm.io/package/@cos-ui/react/versions

## README

# @cos-ui/react

Styled components for CoStudo Project

<br/>

### Getting started

<br/>

1. Install the package

```shell
$ npm install @cos-ui/react
```

<br/>

2. Set global style and theme provider

```typescript jsx
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`.

```typescript jsx
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.

```typescript jsx
// 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).

```typescript jsx
import { createGlobalStyle } from 'styled-components';
import { cosStyle } from '@cos-ui/react';

const GlobalStyle = createGlobalStyle`
  ${cosStyle}
  /* other style */
`;
```

<br/>

3. Import the parts

Import and structure the parts.

```typescript jsx
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>
);
```

<br/>

### Demo

You can see demo of our components [here](https://idyllic-puffpuff-476e23.netlify.app/)!

---
_Source: https://npm.io/package/@cos-ui/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._