{"id":13805050,"url":"https://github.com/alexandre-lelain/components-extra","last_synced_at":"2025-06-22T04:35:46.071Z","repository":{"id":39352247,"uuid":"202372085","full_name":"alexandre-lelain/components-extra","owner":"alexandre-lelain","description":"React molecule-components based on Material-ui.","archived":false,"fork":false,"pushed_at":"2023-01-27T04:30:34.000Z","size":8299,"stargazers_count":89,"open_issues_count":11,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T14:13:22.782Z","etag":null,"topics":["material-ui","react","react-molecule-components","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://components-extra.netlify.app","language":"TypeScript","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/alexandre-lelain.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-14T14:55:50.000Z","updated_at":"2024-12-19T05:45:44.000Z","dependencies_parsed_at":"2023-02-15T05:15:46.743Z","dependency_job_id":null,"html_url":"https://github.com/alexandre-lelain/components-extra","commit_stats":null,"previous_names":[],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandre-lelain%2Fcomponents-extra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandre-lelain%2Fcomponents-extra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandre-lelain%2Fcomponents-extra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandre-lelain%2Fcomponents-extra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandre-lelain","download_url":"https://codeload.github.com/alexandre-lelain/components-extra/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252892504,"owners_count":21820648,"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":["material-ui","react","react-molecule-components","reactjs","typescript"],"created_at":"2024-08-04T01:00:56.882Z","updated_at":"2025-05-07T14:13:30.990Z","avatar_url":"https://github.com/alexandre-lelain.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://components-extra.netlify.app/\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg width=\"150\" src=\"https://components-extra.netlify.app/icons/icon-192x192.png\" alt=\"Components-extra logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\u003ch1\u003ecomponents-extra\u003c/h1\u003e\n\n\u003cp\u003e\n  React UI molecule-components built on top of \u003ca href=\"https://styled-components.com\"\u003estyled-components\u003c/a\u003e \u0026 \u003ca href=\"https://material-ui.com\"\u003ematerial-ui components\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n[**Read the API**](https://components-extra.netlify.app)\n\n\u003cbr/\u003e\n\n[![Docs Status](https://api.netlify.com/api/v1/badges/950cb520-b2e5-434f-b777-c36eede4e727/deploy-status)](https://components-extra.netlify.app/)\n[![npm version](https://img.shields.io/npm/v/components-extra.svg?style=flat)](https://www.npmjs.com/package/components-extra)\n[![ci status](https://travis-ci.com/alexandre-lelain/components-extra.svg?branch=master)](https://travis-ci.com/alexandre-lelain/components-extra)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/alexandre-lelain/components-extra/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/alexandre-lelain/components-extra/pulls)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357\u0026colorA=db748e)](https://github.com/styled-components/styled-components)\n[![build formats](https://img.shields.io/badge/module%20formats-amd%2C%20cjs%2C%20esm-green.svg)](https://github.com/alexandre-lelain/components-extra)\n[![bundle size](https://badgen.net/bundlephobia/min/components-extra@latest)](https://bundlephobia.com/result?p=components-extra@latest)\n\n\u003c/div\u003e\n\n## Motivation\n\nDo you have a web application to develop as soon as possible ? Are you tired of duplicating components such as a Navbar or a CookiesBanner across all your applications ?\nDo you want to use [material-design](material.io/design/) standards ?\n\nWell, you are in the right place. This lib was made **just** for **you**.\n\nThe aim of the project is to provide fast-to-use **molecule** components (like a Navbar, a CookiesBanner, and so on) built on top of material-ui components \u0026 standards.\n\nThe components are built under the [compound pattern](https://kentcdodds.com/blog/compound-components-with-react-hooks) with this very simple purpose: **save you time**. They focus\non what they were made for. They have very few props so you can integrate them **right-away** as they all have\na built-in default behavior. You can customize easily any single inner component of a molecule component, and\nyou can bring your own **theme** to customize them with your own styleguide.\n\nBy the way: no more bloated components library. **components-extra** is [really light!](https://bundlephobia.com/result?p=components-extra@latest)\n\n## Menu\n\n- [Documentation](#documentation)\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Getting started in only 2 steps](#getting-started-in-only-2-steps)\n- [Customization](#customization)\n- [TypeScript](#typescript)\n- [Bundling in your project](#bundling-in-your-project)\n- [Contributing](#contributing)\n\n## Documentation\n\nVisit the [documentation site](https://components-extra.netlify.app) to see the list of available components the lib has to offer. You can check out the props of each component, see the source code of the stories and even play with them live with the react-live editor. You will also find guides to help you setup the library, use it, and extend it.\n\n## Requirements\n\nIn order for the lib to be the smallest possible, the three following dependencies are externals to the lib.\nSo you will need to have those four installed on your app:\n\n- **[react \u003e= 17.0.0](https://www.npmjs.com/package/react)**\n- **[react-dom \u003e= 17.0.0](https://www.npmjs.com/package/react-dom)**\n- **[styled-components \u003e= 5.0.0](https://www.npmjs.com/package/styled-components)**\n- **[@material-ui/core \u003e= 4.10.0](https://www.npmjs.com/package/@material-ui/core)**\n\n## Installation\n\n```shell\nyarn add components-extra\n```\n\nor\n\n```shell\nnpm i components-extra\n```\n\nSome more good news: This library is **tree-shakeable** and **side-effect free**! It also supports older builds like cjs and umd if needed.\n\n### Fonts\n\nLike Material-UI, the components all use **[Roboto](https://fonts.google.com/specimen/Roboto)** font-familly as their main option, but it is not included in **components-extra** to provide more freedom to the developers.\n\nYou have to manually use the following CDN link to include the Roboto font in your application:\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\u0026display=swap\"\n/\u003e\n```\n\n## Getting started in only 2 steps\n\n### Step 1\n\n**components-extra** relies on both [material-ui theme](https://material-ui.com/customization/theming/) configuration as well as the [styled-components](https://www.styled-components.com/docs/advanced) theming system.\n\nSo the first step consists into wrapping your web application in **components-extra**'s default theme provider `\u003cStyledProvider\u003e`:\n\n```jsx\nimport React from 'react'\nimport { StyledProvider } from 'components-extra'\n\nconst App = () =\u003e {\n  return (\n    \u003cStyledProvider\u003e\n      \u003cp\u003eSimple, is it not ?\u003c/p\u003e\n    \u003c/StyledProvider\u003e\n  )\n}\n```\n\nDoing so will forward the **theme** object to all the children recursively. Not using this Provider above\nthe other components will result in an JS error.\n\n### Step 2\n\nImport the component you want to use. For example, the `BackToTop` button:\n\n```jsx\nimport React from 'react'\nimport { BackToTop, StyledProvider } from 'components-extra'\n\nconst App = () =\u003e {\n  return (\n    \u003cStyledProvider\u003e\n      \u003cBackToTop /\u003e\n    \u003c/StyledProvider\u003e\n  )\n}\n```\n\nAnd voilà! You're all set and ready to create your website's interface.\n\n## Customization\n\nYou can totally override the default **theme**. By default, the components use the\nfollowing [custom theme](https://components-extra.netlify.com/?path=/story/introduction-default-theme--values).\nThis default theme is applied on top of the [material-ui](https://material-ui.com/customization/theming/) one.\n\nYou can override this theme with the prop `theme` of the `StyledProvider` component\nmentionned above.\n\n\u003e **Note:** your theme object needs to follow the structure of Material-ui's theme. You can find it here: https://material-ui.com/customization/default-theme/\n\nSay, for example, you want to override the 2 main palette colors to have this:\n\n```js\n// yourTheme.js\nexport default {\n  palette: {\n    primary: {\n      main: '#0000cc',\n    },\n    secondary: {\n      main: '#ff471a',\n    },\n  },\n}\n```\n\nYou can apply it this way:\n\n```js\n// index.js\nimport { BackToTop, StyledProvider } from 'components-extra'\nimport yourTheme from './yourTheme'\n\nconst App = () =\u003e {\n  return (\n    \u003cStyledProvider theme={yourTheme}\u003e\n      \u003cBackToTop /\u003e\n    \u003c/StyledProvider\u003e\n  )\n}\n```\n\n### Extend the components\n\nAll the **components-extra** are exported as [styled-components](styled-components.com), so you can extend them, and\nuse them as styled selectors.\n\nFor example, to extend the **BackToTop** component:\n\n```js\nimport { BackToTop, StyledProvider } from 'components-extra'\nimport styled from 'styled-components'\n\nconst CustomBackToTop = styled(BackToTop)`\n  opacity: 0.5;\n`\n\nconst App = () =\u003e {\n  return (\n    \u003cStyledProvider\u003e\n      \u003cCustomBackToTop /\u003e\n    \u003c/StyledProvider\u003e\n  )\n}\n```\n\nOr to use it as a styled selector:\n\n```js\nimport { BackToTop, StyledProvider } from 'components-extra'\nimport styled from 'styled-components'\n\nconst Container = styled.div`\n  ${BackToTop} {\n    opacity: 0.5;\n  }\n`\n\nconst App = () =\u003e {\n  return (\n    \u003cStyledProvider\u003e\n      \u003cContainer\u003e\n        \u003cBackToTop /\u003e\n      \u003c/Container\u003e\n    \u003c/StyledProvider\u003e\n  )\n}\n```\n\n## TypeScript\n\nComponents-extra requires a minimum version of `TypeScript@3.8`.\n\nSince **v3.0.0**, the library fully supports TypeScript.\n\nAll the components export their **Props** [interface](https://www.typescriptlang.org/docs/handbook/interfaces.html)\nand their **Types**. That means you can fully take leverage of their typings system, and extend them in your own project,\nand integrate them in other components.\n\nEvery component is exported as a [styled-component](https://styled-components.com/) and forward the `ref` you attach to it\nto the root HTML element it renders. You can learn more about react and the refs on [nocode nobug's article](https://nocode-nobug.com/what-is-hidden-behind-react-refs/).\n\nAll the types \u0026 interfaces can be imported from the index **root**, just like the components are.\n\n## Example\n\nSay, for example, that you're working with the [CookiesBanner](/packages/components-extra/src/components/CookiesBanner) component. You\ncan make a new component on top of it using TypeScript this way:\n\n```tsx\nimport React from 'react'\nimport { CookiesBanner, CookiesBannerProps } from 'components-extra'\n\ninterface ExtendedCookiesBannerProps extends CookiesBannerProps {\n  caption: string\n}\n\nconst ExtendedCookiesBanner: React.FC\u003cExtendedCookiesBannerProps\u003e = ({ caption, ...rest }) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cCookiesBanner {...rest} /\u003e\n      \u003cspan\u003e{caption}\u003c/span\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nYour `ExtendedCookiesBanner` will inherit from all the props of `CookiesBanner`, plus the one you defined (here `caption`).\n\nFor a complete guide, pelase refer to the official documentation page: https://components-extra.netlify.app/guides/typescript.\n\n## Bundling in your project\n\n**components-extra** is tree-shakeable, meaning that you can import its components as named imports, like this:\n\n```jsx\nimport { BackToTop } from 'components-extra'\n```\n\nIf your bundler is set up to use the tree-shakeable libraries, it will automatically **only add the named imports\nyou used**. In this example, only the `BackToTop` button will be included in your bundle.\n\nElse, if your bundler is not set up to use **esm/es** builds, you can still only include the components you need\nby importing them as defaults like this:\n\n```jsx\nimport BackToTop from 'components-extra/components/BackToTop'\n```\n\n## Contributing\n\nDo you have a component you would like to add in the library ? Please, open an issue and/or\na PR! :)\n\nDo you want to fix a broken feature ? Please, go ahead :)\n\nAny ideas, suggestions ? Feel free to open an issue!\n\nMore about contributing guidelines \u0026 how to's can be found [here](https://github.com/alexandre-lelain/components-extra/blob/master/CONTRIBUTING.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandre-lelain%2Fcomponents-extra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandre-lelain%2Fcomponents-extra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandre-lelain%2Fcomponents-extra/lists"}