{"id":13793402,"url":"https://github.com/whoisandy/react-blocks","last_synced_at":"2025-04-05T08:07:46.695Z","repository":{"id":33768886,"uuid":"37425147","full_name":"whoisandy/react-blocks","owner":"whoisandy","description":"A higher-level react component to manage complex layouts using flexbox.","archived":false,"fork":false,"pushed_at":"2023-11-30T14:30:25.000Z","size":601,"stargazers_count":499,"open_issues_count":6,"forks_count":35,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-30T07:59:27.252Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://whoisandy.github.io/react-blocks","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/whoisandy.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-06-14T18:54:41.000Z","updated_at":"2024-09-16T13:36:26.000Z","dependencies_parsed_at":"2024-01-20T23:44:14.044Z","dependency_job_id":null,"html_url":"https://github.com/whoisandy/react-blocks","commit_stats":null,"previous_names":["whoisandie/react-blocks"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whoisandy%2Freact-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whoisandy%2Freact-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whoisandy%2Freact-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whoisandy%2Freact-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whoisandy","download_url":"https://codeload.github.com/whoisandy/react-blocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246768311,"owners_count":20830646,"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":[],"created_at":"2024-08-03T23:00:20.609Z","updated_at":"2025-04-05T08:07:46.665Z","avatar_url":"https://github.com/whoisandy.png","language":"JavaScript","readme":"# React Blocks [![NPM Package][npm_img]][npm_site] [![Travis Status][trav_img]][trav_site]\n\nA higher-level react component to manage complex layouts using flexbox. Everything is just another block. Heavily inspired by [Polymer layout.html][polymer], [LayoutJS][layoutjs] and the [CSSinJS][cssinjs] pattern.\n\n\u003e Just pure layout, No more, No less.\n\n## About\nReact blocks uses a *declarative* approach to build complex layouts on top of [CSS Flexbox][flexbox]. Flexbox properties are exposed as attributes on a higher-level react component. Supports media-queries via predefined *mobile-first* queries. Further custom media queries can be specified in a styles object. Please refer the `styles.js` file inside `demo` directory.\n\nPlease note, it does **NOT** handle missing browser features. Please use [Modernizr][modernizr] with Polyfills to achieve that.\n\n## Usage\n\n### NPM and Webpack/Browserify\nInstall via `npm`. Use `--save` to include it in your *package.json*.\n\n```bash\nnpm install react-blocks\n```\n\nStart by importing/requiring react-blocks within your react code.\n\n```js\n// using an ES6 transpiler\nimport Block from 'react-blocks';\n\n// not using an ES6 transpiler\nvar Block = require('react-blocks');\n```\n\nThere's also a umd version available at `lib/umd`. The component is available on `window.ReactBlocks`.\n\n### Layout (Horizontal, Vertical, Reverse, Wrap)\nA block is just a block level div element by default. You can make it a flex container by adding a `layout` attribute. Further to specify a direction, add `horizontal` or `vertical` attributes for row or column respectively. However the default direction would be set to vertical if nothing is specified. The horizontal attribute is optional though, a block container has its flexDirection set to `horizontal` by default. The direction of a block layout can be reversed by adding a `reverse` attribute. Also to make a flex-item stretch its width use the `flex` attribute on a flex-item. Also all flex-items of a block container are wrapped by default.\n\n```js\n// Normal Flex layout\nconst App = () =\u003e {\n  return (\n    \u003cBlock layout\u003e\n      \u003cdiv\u003eAlpha\u003c/div\u003e\n      \u003cdiv\u003eBeta\u003c/div\u003e\n    \u003c/Block\u003e\n  );\n};\n\n// Reverse Flex layout\nconst Reverse = () =\u003e {\n  let { reverse } = styles;\n  return (\n    \u003cBlock style={reverse.block} layout vertical reverse\u003e\n      \u003cdiv\u003eAlpha\u003c/div\u003e\n      \u003cdiv flex\u003eBeta\u003c/div\u003e\n    \u003c/Block\u003e\n  );\n};\n```\n\n### Align, Self-Align \u0026 Justify\n\nBy default flex-items *stretch* to fit the cross-axis and are *start* justified. The `align` and `justify*` attributes are used to align and justify flex-items. Please note *align* \u0026 *justify* attributes have to be declared on a parent container and has to be a `Block` element.\n\n```js\n// Aligned and Justified  blocks\nconst AlignedJustified = () =\u003e {\n  let { vertical } = styles;\n  return (\n    \u003cBlock style={vertical.block} layout center justifyEnd\u003e\n      \u003cBlock\u003eAlpha\u003c/Block\u003e\n      \u003cBlock\u003eBeta\u003c/Block\u003e\n    \u003c/Block\u003e\n  );\n};\n```\n\nFurther flex-items can be self aligned across the cross-axis using the self attribute on the flex-item itself.\n\n```js\n// Self aligned with Aligned and Justified blocks\nconst SelfAlignedJustified = () =\u003e {\n  let { vertical } = styles;\n  return (\n    \u003cBlock style={vertical.block} layout center justifyEnd\u003e\n      \u003cBlock selfStart\u003eAlpha\u003c/Block\u003e\n      \u003cBlock selfEnd\u003eBeta\u003c/Block\u003e\n    \u003c/Block\u003e\n  );\n};\n```\n\nTo center align and center justify an item within a flex-container, use the `centered` attribute.\n\n```js\nconst Centered = () =\u003e {\n  let { centered } = styles;\n  return (\n    \u003cBlock style={centered.block} layout centered\u003e\n      \u003cdiv\u003eCentered\u003c/div\u003e\n    \u003c/Block\u003e\n  );\n};\n```\n\n### Nested Blocks\nBlocks can further be nested. A block could contain multiple blocks as well. Use the `layout` attribute on a flex item to make a it a flex-container. However its not necessary that all children inside a flex-container are wrapped inside a *Block*.\n\n```js\nconst Nested = () =\u003e {\n  return (\n    \u003cBlock layout\u003e\n      \u003cBlock className=\"sidebar\" layout vertical\u003e\n        \u003cBlock\u003eAlpha\u003c/Block\u003e\n        \u003cBlock\u003eBeta\u003c/Block\u003e\n      \u003c/Block\u003e\n      \u003cBlock className=\"content\" layout reverse\u003e\n        \u003cBlock selfEnd\u003eGamma\u003c/Block\u003e\n        \u003cdiv\u003eDelta\u003c/div\u003e\n        \u003cdiv\u003eTheta\u003c/div\u003e\n      \u003c/Block\u003e\n    \u003c/Block\u003e\n  )\n};\n```\n\n### General purpose attributes\nBlocks come with purpose attributes for basic positioning.\n\nAttribute   |  Result\n---------   |  ------\n`block`     |  Assigns `display: block`\n`hidden`    |  Assigns `display: none`\n`invisible` |  Assigns `visibility: hidden`\n`relative`  |  Assigns `position: relative`\n`absolute`  |  Assigns `position: absolute` and sets `top:0;right:0;bottom:0;left:0`. *Note:* When using `absolute` attribute, there must be a container having `position: relative` layout.\n\n## Todo\n- Add vendor prefixes\n- Ability to define custom media-queries\n\n## Issues\nFeel free to contribute. Submit a Pull Request or open an issue for further discussion.\n\n## License\nMIT \u0026copy; [whoisandie][whoisandie]\n\n[polymer]: https://www.polymer-project.org/0.5/docs/polymer/layout-attrs.html\n[layoutjs]: https://github.com/basarat/layoutjs\n[cssinjs]: https://speakerdeck.com/vjeux/react-css-in-js\n[flexbox]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes\n[modernizr]: http://modernizr.com\n[whoisandie]: http://whoisandie.com\n\n[trav_img]: https://api.travis-ci.org/whoisandie/react-blocks.svg\n[trav_site]: https://travis-ci.org/whoisandie/react-blocks\n[npm_img]: https://img.shields.io/npm/v/react-blocks.svg\n[npm_site]: https://www.npmjs.org/package/react-blocks\n","funding_links":[],"categories":["目录"],"sub_categories":["\u003ca id=\"ui\"\u003eui\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhoisandy%2Freact-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhoisandy%2Freact-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhoisandy%2Freact-blocks/lists"}