https://github.com/jacob-ebey/styled-components-ts
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress and the added benefits of TypeScript 💅
https://github.com/jacob-ebey/styled-components-ts
Last synced: about 1 year ago
JSON representation
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress and the added benefits of TypeScript 💅
- Host: GitHub
- URL: https://github.com/jacob-ebey/styled-components-ts
- Owner: jacob-ebey
- License: wtfpl
- Created: 2017-09-16T09:14:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-11-29T19:49:05.000Z (over 7 years ago)
- Last Synced: 2025-04-09T22:17:30.193Z (about 1 year ago)
- Language: JavaScript
- Size: 121 KB
- Stars: 150
- Watchers: 7
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://circleci.com/gh/jacob-ebey/styled-components-ts)
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress and the added benefits of TypeScript 💅
```
npm install --save styled-components styled-components-ts
```
## Getting Started
```typescript
// Import react, styledComponents and styledComponentsTS
import * as React from 'react'
import styledComponents from 'styled-components'
import styledComponentsTS from 'styled-components-ts'
// Create an interface for the component
export interface MyImageProps {
size: number
borderColor?: string
borderSize?: number
}
// Create a styled component with our props interface
const MyImage = styledComponentsTS(styledComponents.img) `
width: ${props => props.size}px;
height: ${props => props.size}px;
border: ${props => props.borderSize || '4px'} solid ${props => props.borderColor || 'black'}
`
export default MyImage
```
Now we have all the typescript goodies for MyImage like type checking and auto-complete.
```jsx
import MyImage from './MyImage'
```
We can also extend our components and add new props with ease.
```typescript
// Import react, styledComponents and styledComponentsTS
import * as React from 'react'
import styledComponents from 'styled-components'
import styledComponentsTS from 'styled-components-ts'
// Import our image and it's props
import MyImage, { MyImageProps } from './MyImage'
// Create an interface for the component that extends the base image props
export interface ExpandedImageProps extends MyImageProps {
backgroundColor?: string
}
// Create a styled component with our props interface that extends MyImage
const ExpandedImage = styledComponentsTS(MyImage.extend)`
background-color: ${props => props.backgroundColor || 'unset'};
`
export default ExpandedImage
```
## Using styled-components v4+?
If you're using a version of styled-components greater than `4.0.0` you do not need this library. See below for example usage:
```tsx
const Button = styled.div<{ selected?: boolean }>`
background: ${props => props.selected ? 'red' : 'blue'};
`
// or
interface IButton {
selected?: boolean
}
const Button = styled.div`
background: ${props => props.selected ? 'red' : 'blue'};
`
```
For more information please see https://github.com/styled-components/styled-components