0.5.0 • Published 10 months ago

inlines v0.5.0

Weekly downloads
-
License
ISC
Repository
github
Last release
10 months ago

Inlines

When you just want to use the inline style prop in React.

Uses inline styles where possible, uses dynamic stylesheets for the rest.

For example

import { styled } from 'inlines'

const App = () => {
  return (
    <styled.div
      style={{
        border: '10px solid purple',
        background: 'yellow',
        '@media (min-width: 600px)': {
          background: 'hotpink'
        },
        '@keyframes': {
          from: {
            opacity: 0
          },
          to: {
            opacity: 1
          }
        }
      }}
    >
      <div
        style={{
          marginBottom: 8
        }}
      >
        Just use normal elements when you can
      </div>
      <styled.input
        placeholder="Wow I'm orange"
        style={{
          border: '1px solid blue',
          '&::placeholder': {
            color: 'orange'
          }
        }}
      />
      <styled.button
        style={{
          border: '1px solid red',
          '&:hover': {
            background: 'yellow'
          },
          '&:active': {
            background: 'red'
          }
        }}
      >
        Look I'm a button
      </styled.button>
    </styled.div>
  )
}

export default App

Or use styled as a function if you prefer:

import { styled } from 'inlines'

const Container = styled('div', {
  border: '10px solid purple',
  background: 'yellow',
  '@media (min-width: 600px)': {
    background: 'hotpink'
  },
  '@keyframes': {
    from: {
      opacity: 0
    },
    to: {
      opacity: 1
    }
  }
})

const Input = styled('input', {
  border: '1px solid blue',
  '&::placeholder': {
    color: 'orange'
  }
})

const Button = styled('button', {
  border: '1px solid red',
  '&:hover': {
    background: 'yellow'
  },
  '&:active': {
    background: 'red'
  }
})

const App = () => {
  return (
    <Container>
      <div
        style={{
          marginBottom: 8
        }}
      >
        Just use normal elements when you can
      </div>
      <Input placeholder="Wow I'm orange" />
      <Button>Look I'm a button</Button>
    </Container>
  )
}

export default App
0.5.0

10 months ago

0.4.0-alpha.26

1 year ago

0.4.0-alpha.25

1 year ago

0.4.0-alpha.18

1 year ago

0.4.0-alpha.4

1 year ago

0.4.0-alpha.19

1 year ago

0.4.0-alpha.3

1 year ago

0.4.0-alpha.14

1 year ago

0.4.0-alpha.15

1 year ago

0.4.0-alpha.16

1 year ago

0.4.0-alpha.17

1 year ago

0.4.0-alpha.10

1 year ago

0.4.0-alpha.11

1 year ago

0.4.0-alpha.12

1 year ago

0.4.0-alpha.13

1 year ago

0.4.0-alpha.9

1 year ago

0.4.0-alpha.8

1 year ago

0.4.0-alpha.7

1 year ago

0.4.0-alpha.6

1 year ago

0.4.0-alpha.5

1 year ago

0.4.0-alpha.21

1 year ago

0.4.0-alpha.22

1 year ago

0.4.0-alpha.23

1 year ago

0.4.0-alpha.24

1 year ago

0.4.0-alpha.20

1 year ago

0.4.0-alpha.2

2 years ago

0.4.0-alpha.1

2 years ago

0.4.0-alpha.0

2 years ago

0.3.0

2 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago