npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

react-inln

1.1.3 • Public • Published

react-inln 🖍️

Define react component style for multiple breakpoints directly in props

Motivation

In every project I find my self lost about defining styles and media queries. So this simple component pretends to make my and your life easier.

Usage

$ npm i react-inln
import Box from 'react-inln'
 
export default () => (
  <Box tag='section'
    color="red"
    color_xs="blue"
    width_l="1400px"
    width_s="200px"
    onClick={() => ...}
  >
  ...
  </Box>
)

Props

  • tag Element to use for rendering (eg. 'div' or Component). Defaults to 'div'.
  • { ...css rules }: normal css rules in camelCase. For responsive, add '_[breakpoint]' to css rule, where breakpoint should be an alias for breakpoint (eg. fontSize_m="22px")
  • { ...other props } - props to pass to element defined in tag (eg. 'onInput={() => ...}' for 'tag="input"')

Breakpoints

The default breakpoints are:

    { match: 'only screen and (max-width: 575px)', alias: 'xs' },
    { match: 'only screen and (max-width: 768px)', alias: 's' },
    { match: 'only screen and (max-width: 992px)', alias: 'm' },
    { match: 'only screen and (max-width: 1200px)', alias: 'l' },
    { match: 'only screen and (min-width: 1201px)', alias: 'xl' },
 

but they are easy to modify. To do so, consider the following example:

//components/Element.js
import RootElement from 'react-inln'
export default class Element extends RootElement {
  breakpoints: [
    { match: 'only screen and (min-width: 1200px)', alias: 'extraLarge' },
    { match: 'only screen and (min-width: 992px)', alias: 'large' },
    { match: 'only screen and (min-width: 769px)', alias: 'medium' },
    { match: 'only screen and (min-width: 321px)', alias: 'small' },
    { match: 'only screen and (min-width: 1px)', alias: 'verySmall' },
  ]
}
 
import React, { Component } from 'react'
import Element from 'components/Element.js'
 
class Somenthig extends Component{
  ...
  render() {
    return <Element tag="input" color="red" color_extraLarge="orange" />
  }
}

Contributing

  • Fork it
  • Create a branch with proper name in kebab-case (eg. fix-something)

    Optional: Create React app in other folder and install this package with npm link or npm i path/to/react-inln

  • Create a PR describing what you did
  • Grab a coffee

Author

Jose Varela
(joselcvarela@gmail.com)

install

npm i react-inln

Downloadsweekly downloads

7

version

1.1.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability