iwant-style
Tags: react, css, styledcomponents, cssinjs
Published: 2019-01-07 16:27:38

---
title: iwant-style
published: true
description: iwant-style library imports ready styles using CSS in JS to be used in conjunction with styled-components.
tags: reactjs, css, styled-components, css-in-js
cover_image: https://thepracticaldev.s3.amazonaws.com/i/cx6wxo05dcjr6wmqns6a.png
---


iwant-style library imports ready styles using CSS in JS to be used in conjunction with styled-components.

## Screenshot

![iwant-style](https://thepracticaldev.s3.amazonaws.com/i/qngpuh7xg7y80icfxs0k.png)


## Contents

- [Getting Started](#getting-started)
- [Usage](#usage)
- [Components](#components)

## Getting Start

```bash
npm install iwant-style
```

```bash
npm install styled-components
```

## Usage

```javascript
  import styled from 'styled-components';

  import { inputDark } from 'iwant-style';

  const Dark = styled.form`
    ${inputDark};
  `;

  ...
     <Dark action='' method=''>
      <input type='search' placeholder='What are you looking for?' />
      <button>Search</button>
    </Dark>
  ...
```

## Components

### Comment

<img src="https://thepracticaldev.s3.amazonaws.com/i/tulft4p7ra61x9yuglt1.png" width="300" />

##### Usage

```javascript
  import styled from 'styled-components';
  
  import { comment } from 'iwant-style';

  const Comments = styled.div`
    ${comment}
  `;

  ...
   <Comments>
      <section>
        <h1>Petter</h1>
        <h2>C0-Founder</h2>
        <p>
          Sit cupidatat commodo sit reprehenderit reprehenderit irure aliquip do
          occaecat id.
        </p>
      </section>
      <div>
        <img
          src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg'
          alt='profile-sample5'
        />
      </div>
    </Comments>
  ...
```

##### Properties

| Name         | Parameter | Default  |
| -----------  | --------- | -------- |
| `${comment}` |           | `default` |


### PreLoader

<img src="https://thepracticaldev.s3.amazonaws.com/i/tk4tv227arvcs2qi62ob.png" width="300" />

##### Usage

```javascript
  import styled from 'styled-components';

  import { preloader } from 'iwant-style';

  const Preloader = styled.div`
    ${preloader};
  `;

  ...
    <Preloader>
        <div />
        <div />
        <div />
    </Preloader>
  ...
```

##### Properties

| Name                 | Parameter | Default   |
| -------------------- | --------- | --------- |
| `${preloader}`       |           | `bubbles` |
| `${preloaderCircle}` |           | `circle`  |

## Preloader Circle

```javascript
  import styled from 'styled-components';

  import { preloaderCircle } from 'iwant-style';


  const Preloader = styled.div`
    ${preloaderCircle};
  `;

  ...
    <Preloader>
        <div />
    </Preloader>
  ...
```

### Avatar

<img src="https://thepracticaldev.s3.amazonaws.com/i/620kpnim4d7v6843glkt.png" width="300" />

##### Usage

```javascript
  import styled from 'styled-components';

  import { avatar } from 'iwant-style';

  const Avatar = styled.img`
    ${avatar};
  `;

  ...
    <Avatar src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample9.jpg' />
  ...
```

##### Properties

| Name        | Parameter | Default  |
| ----------- | --------- | -------- |
| `${avatar}` |           | `person` |

### Button

<img src="https://thepracticaldev.s3.amazonaws.com/i/kutr5nrqi08cvah9tz1z.png"  />

##### Usage

```javascript
  import styled from 'styled-components';

  import { btn } from 'iwant-style';

  const Button = styled.button`
    ${btn};
  `;

  ...
    <Button>Start</Button>
  ...
```

##### Properties

| Name            | Parameter   | Default  |
| --------------- | ----------- | -------- |
| `${btn}`        |             | `square` |
| `${btn(param)}` | `"disable"` |          |
| `${btn(param)}` | `"round"`   |          |

### Input

<img src="https://thepracticaldev.s3.amazonaws.com/i/sf5xes0d9x8f9ht7jzlq.png" />



##### Usage

```javascript
  import styled from 'styled-components';

  import { input } from 'iwant-style';

  const Input = styled.div`
    ${input};
  `;

  ...
     <Input>
      <input type='text' required />
      <span />
      <label>Name</label>
    </Input>
  ...
```

## Dark

```javascript
  import styled from 'styled-components';

  import { inputDark } from 'iwant-style';

  const Dark = styled.form`
    ${inputDark};
  `;

  ...
     <Dark action='' method=''>
      <input type='search' placeholder='What are you looking for?' />
      <button>Search</button>
    </Dark>
  ...
```

##### Properties

| Name       | Parameter | Default     |
| ---------- | --------- | ----------- |
| `${input}` |           | `animation` |

### Card

<img src="https://thepracticaldev.s3.amazonaws.com/i/9yqnv2rlsvot2rwfs1n6.png" width="400" />

##### Usage

```javascript
  import styled from 'styled-components';

  import { card } from 'iwant-style';

  const Card = styled.div`
    ${card};
  `;

  ...
     <Card>
       <h1>Card Title</h1>
        <p>
          Veniam elit commodo culpa sunt adincididunt nisi minim amet qui
          sit pariatur occaecat. Veniam elitcommodo culpa sunt ad
          incididunt nisi minim amet qui sitpariatur occaecat. sit pariatur
          occaecat.
        </p>
      <hr />
      <div>
        <a href='#'>This is a link</a>
        <a href='#'>This is a link</a>
      </div>
     </Card>
  ...
```

##### Properties

| Name      | Parameter | Default |
| --------- | --------- | ------- |
| `${card}` |           | `info`  |

### Pagination

<img src="https://thepracticaldev.s3.amazonaws.com/i/x12hjkr632c62jqoahp2.png" width="200" />

##### Usage

```javascript
  import styled from 'styled-components';

  import { pagination } from 'iwant-style';

  const Pagination = styled.ul`
    ${pagination};
  `;

  ...
     <Pagination>
            <li>
              <a href='#'>&lt;</a>
            </li>
            <li>
              <a href='#'>1</a>
            </li>
            <li>
              <a href='#'>2</a>
            </li>
            <li>
              <a href='#'>3</a>
            </li>
            <li>
              <a href='#'>&gt;</a>
            </li>
    </Pagination>
  ...
```

##### Properties

| Name            | Parameter | Default |
| --------------- | --------- | ------- |
| `${pagination}` |           | `arrow` |


If you liked this project, contribute improvements or give a star ⭐️ on  [GitHub.](https://github.com/mariorodeghiero/iwant-style)

Thanks!