HTML for React with styled-system props
You can find the full documentation at html-styled.now.sh, which is also built with html-styled! View the code in the docs folder in this repository.
This package is for projects using React that allows you to write HTML elements in which you can pass responsive style props easily. Normally when we write and style HTML elements in React we use the standard style props as follows:
<p style={{ color: "red", fontSize: "18px" }}>Hello world!</p>The syntax is a little bit clunky, and gets a bit harder to read as we add
more and more css rules. And if we wanted to make it responsive, e.g change
the font size on smaller screens, we'd need to give it a class name and write
some bulky CSS media queries. We also can't access selectors like :hover at all
this way.
Using this package means that we get a nicer style props syntax, and can easily make this responsive using Styled System's responsive style syntax. With this in mind, the example above becomes:
<P color="red" fontSize={["16px", "18px"]}>
Hello world!
</P>Now instead of using the standard style prop we have a prop for every css
property, e.g color and fontSize. If we want to make a property responsive we
simply pass an array of strings instead of just one string, where each element
in the array applies the rule to a certain screen size. In this example, the
font size is 16px on small screens, and 18px on all larger screens. Notice
that <p> becomes <P>.
Another benefit we get is access to direct CSS selector props. This means that
we can add rules for selectors such as:hover directly
through a prop in React. To change color, for example, on hover we do the
following:
<P color="red" hover={{ color: "blue" }}>
Hello world!
</P>By adding a CSS selector name such as hover as a prop we get quick, direct access to
selectors we want to use and don't have to write separate css or use bulky
template literals. Taking this even further we can combine this with the responsive syntax:
<P color="red" hover={{ color: ["green", "blue"] }}>
Hello world!
</P>Now when we hover on small screens the color is green, and on larger screens it is blue - no bulky CSS with media queries required and not a template literal in sight!
Install html-styled and its peer dependencies.
yarn add html-styled styled-system @styled-system/css styled-components
or
npm install html-styled styled-system @styled-system/css styled-components
These are dependencies that we rely on, but instead of bundling them in our package we get you to install them separately. This keeps our package size down and allows you to install specific versions of each dependency if you need to.
- You're hacking together a small app with React
- You're fine using HTML but also need a bit more to quickly prototype
- You like
styled-system's features like style props and reponsive props but can't be bothered setting it up
Probably not, since it's essentially just inline css but easier and this isn't very scalable. However, you can make reusable components with them and make you're own mini design system if desired.
Believe it or not, HTML element names are case insensitive, so uppercase HTML elements are actually valid syntax. However, since conventionally developers use lowercase element names you can easily spot which elements you write are standard HTML and which ones are from html-styled. React component names are normally just capitalised as well, so you can also distunguish between normal components and html-styled components.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent