{"id":16810612,"url":"https://github.com/joselcvarela/react-inln","last_synced_at":"2025-04-11T01:37:37.417Z","repository":{"id":57333460,"uuid":"163322982","full_name":"joselcvarela/react-inln","owner":"joselcvarela","description":"Define react component style for multiple breakpoints directly in props","archived":false,"fork":false,"pushed_at":"2019-01-12T09:30:35.000Z","size":55,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:08:44.227Z","etag":null,"topics":["css","inline","media","props","query","react","responsive"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joselcvarela.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-27T18:00:57.000Z","updated_at":"2023-03-04T05:12:18.000Z","dependencies_parsed_at":"2022-08-24T20:42:37.505Z","dependency_job_id":null,"html_url":"https://github.com/joselcvarela/react-inln","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joselcvarela%2Freact-inln","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joselcvarela%2Freact-inln/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joselcvarela%2Freact-inln/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joselcvarela%2Freact-inln/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joselcvarela","download_url":"https://codeload.github.com/joselcvarela/react-inln/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248326424,"owners_count":21085098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","inline","media","props","query","react","responsive"],"created_at":"2024-10-13T10:16:00.832Z","updated_at":"2025-04-11T01:37:37.397Z","avatar_url":"https://github.com/joselcvarela.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-inln 🖍️\nDefine react component style for multiple breakpoints directly in props\n\n## Motivation\nIn every project I find my self lost about defining styles and media queries.\nSo this simple component pretends to make my and your life easier.\n\n## Usage\n```sh\n$ npm i react-inln\n```\n\n```js\nimport Box from 'react-inln'\n\nexport default () =\u003e (\n  \u003cBox tag='section'\n    color=\"red\"\n    color_xs=\"blue\"\n    width_l=\"1400px\"\n    width_s=\"200px\"\n    onClick={() =\u003e ...}\n  \u003e\n  ...\n  \u003c/Box\u003e\n)\n```\n\n## Props\n - **tag** Element to use for rendering (eg. 'div' or Component). Defaults to 'div'.\n - **{ ...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\")\n - **{ ...other props }** - props to pass to element defined in tag (eg. 'onInput={() =\u003e ...}' for 'tag=\"input\"')\n\n## Breakpoints\nThe default breakpoints are:\n```js\n    { match: 'only screen and (max-width: 575px)', alias: 'xs' },\n    { match: 'only screen and (max-width: 768px)', alias: 's' },\n    { match: 'only screen and (max-width: 992px)', alias: 'm' },\n    { match: 'only screen and (max-width: 1200px)', alias: 'l' },\n    { match: 'only screen and (min-width: 1201px)', alias: 'xl' },\n\n```\nbut they are easy to modify. To do so, consider the following example:\n```js\n//components/Element.js\nimport RootElement from 'react-inln'\nexport default class Element extends RootElement {\n  breakpoints: [\n    { match: 'only screen and (min-width: 1200px)', alias: 'extraLarge' },\n    { match: 'only screen and (min-width: 992px)', alias: 'large' },\n    { match: 'only screen and (min-width: 769px)', alias: 'medium' },\n    { match: 'only screen and (min-width: 321px)', alias: 'small' },\n    { match: 'only screen and (min-width: 1px)', alias: 'verySmall' },\n  ]\n}\n\nimport React, { Component } from 'react'\nimport Element from 'components/Element.js'\n\nclass Somenthig extends Component{\n  ...\n  render() {\n    return \u003cElement tag=\"input\" color=\"red\" color_extraLarge=\"orange\" /\u003e\n  }\n}\n```\n\n## Contributing\n- Fork it\n- Create a branch with proper name in kebab-case (eg. fix-something)\n  \u003e Optional: Create React app in other folder and install this package with npm link or npm i path/to/react-inln\n- Create a PR describing what you did\n- Grab a coffee\n\n## Author\n[Jose Varela](https://github.com/joselcvarela)\\\n(joselcvarela@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoselcvarela%2Freact-inln","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoselcvarela%2Freact-inln","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoselcvarela%2Freact-inln/lists"}