{"id":19598515,"url":"https://github.com/kaplanh/react-styled-components","last_synced_at":"2026-05-04T17:35:54.959Z","repository":{"id":223926010,"uuid":"761916470","full_name":"kaplanh/React-Styled-Components","owner":"kaplanh","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-22T19:14:28.000Z","size":639,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T15:16:04.629Z","etag":null,"topics":["props-drilling","react","react-icons","react-props","styled-components","themeprovider"],"latest_commit_sha":null,"homepage":"https://react-styled-components-ten.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaplanh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-22T18:19:09.000Z","updated_at":"2024-02-22T19:16:23.000Z","dependencies_parsed_at":"2024-02-22T19:55:54.791Z","dependency_job_id":"c566a02c-14ca-4794-b5e7-27873d23f44e","html_url":"https://github.com/kaplanh/React-Styled-Components","commit_stats":null,"previous_names":["kaplanh/styled-components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kaplanh/React-Styled-Components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FReact-Styled-Components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FReact-Styled-Components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FReact-Styled-Components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FReact-Styled-Components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaplanh","download_url":"https://codeload.github.com/kaplanh/React-Styled-Components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2FReact-Styled-Components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32618143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["props-drilling","react","react-icons","react-props","styled-components","themeprovider"],"created_at":"2024-11-11T09:06:33.399Z","updated_at":"2026-05-04T17:35:54.938Z","avatar_url":"https://github.com/kaplanh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Styled Components Example\r\n\r\n[:point_right: Click here to see on browser](https://react-styled-components-ten.vercel.app/)\r\n\r\n![react styled-components](https://github.com/kaplanh/React-Styled-Components/assets/101884444/c9973af2-a959-421d-ae77-4fb20b17b340)\r\n\r\n\r\n\r\n---\r\n\r\n| **What's used in this app ?**                                                      | **How use third party libraries** | **Author**                                                    |\r\n| ---------------------------------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------- |\r\n| [React Styled Components](https://styled-components.com/docs/basics)                               | npm i/yarn add styled-components                                  | [Take a look at my portfolio](https://kaplanh.github.io/Portfolio_with_CssFlex/)                                                                                 |\r\n|  [React icons](https://www.npmjs.com/package/react-icons)        |             |     [Visit me on Linkedin](https://www.linkedin.com/in/kaplan-h/)                                                                              |\r\n| [Semantic-Commits](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716) |                                   |                                                                                  |\r\n|  Deploy with [Vercel](https://vercel.com/kaplanh)        |             |                                                                                  |\r\n\r\n---\r\n\r\n## How To Run This Project 🚀\r\n\r\n\u003cbr/\u003e\r\n\r\n### 💻 Install React 👇\r\n\r\n```bash\r\nyarn create react-app .  or npx create-react-app .\r\n```\r\n\r\n### 💻 Install Sass 👇\r\n\r\n```bash\r\nyarn add sass  or npm i sass\r\n```\r\n\r\n## 🔴 Delete these files and delete the imports👇\r\n\r\n    - App.test.js\r\n    - reportWebVitals.js\r\n    - setupTests.js\r\n    - favicon.ico\r\n    - logo192.png\r\n    - logo512.png\r\n    - manifest.json\r\n    - robots.txt\r\n\r\n### 💻 Start the project 👇\r\n\r\n```bash\r\nyarn start or npm start\r\n```\r\n\r\nOR\r\n\r\n-   \u003cstrong\u003eClone the Repo\u003c/strong\u003e\r\n\r\n    ```sh\r\n    git clone\r\n    ```\r\n\r\n-   \u003cstrong\u003eInstall NPM packages\u003c/strong\u003e\r\n\r\n    ```sh\r\n    npm install or yarn\r\n    ```\r\n\r\n-   \u003cstrong\u003eRun the project\u003c/strong\u003e\r\n\r\n    ```sh\r\n    npm start or yarn start\r\n    ```\r\n\r\n-   \u003cstrong\u003eOpen the project on your browser\u003c/strong\u003e\r\n\r\n    ```sh\r\n    http://localhost:3000/\r\n    ```\r\n\r\n-   ### \u003cstrong\u003eEnjoy! 🎉\u003c/strong\u003e\r\n\r\n---\r\n\r\n## Project Skeleton\r\n\r\n```\r\n reaact styleed components-example(folder)\r\n|\r\n|----public (folder)\r\n│     └── index.html\r\n│     └── images(folder)\r\n|----src (folder)\r\n│    │\r\n│    ├--- components(folder)\r\n│    |        ├--- styles (folder)\r\n|    |        |     |\r\n│    |        |     ├---Button.styled.jsx\r\n│    |        |     ├---Card.styled.jsx\r\n│    |        |     ├---Container.styled.jsx\r\n│    |        |     ├---Flex.styled.jsx\r\n│    |        |     ├---Footer.styled.jsx\r\n│    |        |     ├---GlobalStyles.jsx\r\n│    |        |     ├---Header.styled.jsx\r\n│    |        |     ├---SocialIcons.styled.jsx\r\n|    |        |\r\n|    |        |--- Card.jsx\r\n|    |        |--- Footer.jsx\r\n|    |        |--- Header.jsx\r\n|    |        |--- SocialIcons.jsx\r\n|    |        \r\n|    |        \r\n│    ├--- App.js\r\n│    ├--- data.js\r\n│    |--- index.js\r\n│\r\n│\r\n|── .gitignore\r\n|── package-lock.json\r\n├── package.json\r\n|── README.md\r\n|── yarn.lock\r\n\r\n\r\n```\r\n\r\n---\r\n\r\n### At the end of the project, the following topics are to be covered;\r\n\r\n- styled-components  ThemeProvider \u0026 theme\r\n\r\n```jsx\r\nimport Header from \"./components/Header\";\r\nimport { ThemeProvider } from \"styled-components\";\r\nimport { GlobalStyles } from \"./components/styles/GlobalStyles\";\r\nimport data from \"./data\";\r\nimport Card from \"./components/Card\";\r\nimport Footer from \"./components/Footer\";\r\nimport Container from \"./components/styles/Container.styled\";\r\n\r\nconst theme = {\r\n    colors: {\r\n        header: \"#fff\",\r\n        body: \"#fff\",\r\n        footer: \"#8A1C4A\",\r\n        primary: \"#bebe\",\r\n        secondary: \"#dde0e2ed\",\r\n    },\r\n    responsive: \"768px\",\r\n    breakpoints: { xs: \"300px\", sm: \"500px\", md: \"700px\" },\r\n    margin: {},\r\n    padding: {},\r\n};\r\nconst App = () =\u003e {\r\n    return (\r\n        \u003cThemeProvider theme={theme}\u003e\r\n            \u003cGlobalStyles /\u003e\r\n            \u003cHeader /\u003e\r\n            \u003cContainer\u003e\r\n                {data.map((item, index) =\u003e {\r\n                    return \u003cCard {...item} key={index} /\u003e;\r\n                })}\r\n            \u003c/Container\u003e\r\n            \u003cFooter /\u003e\r\n        \u003c/ThemeProvider\u003e\r\n    );\r\n};\r\n\r\nexport default App;\r\n\r\n2.asama\r\n//Flex.styled.jsx\r\nimport styled from \"styled-components\";\r\n\r\nconst Flex = styled.div`\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 2rem;\r\n    \u0026 \u003e div,\r\n    \u0026 \u003e ul {\r\n        /*!Tüm elemanların buyumesine izin ver*/\r\n        flex-grow: 1;\r\n        /* Tüm div'lerin eşit miktarda alan tutabilmesine izin ver.*/\r\n        flex-basis: 0;\r\n    }\r\n    @media (max-width: ${({ theme }) =\u003e theme.responsive}) {\r\n        flex-direction: column;\r\n        text-align: center;\r\n    }\r\n\r\n   \r\n`;\r\n\r\nexport default Flex;\r\n\r\n\r\n\r\n```\r\n\r\n\r\n- styled-components div\r\n\r\n```jsx\r\n1.asama\r\n//Container.styled.jsx\r\n\r\nimport styled from \"styled-components\";\r\n\r\nconst Container = styled.div`\r\n    width: 1000px;\r\n    max-width: 100%;\r\n    padding: 0 20px;\r\n    margin: 0 auto;\r\n`;\r\n\r\nexport default Container;\r\n\r\n2.asama\r\n//App.jsx\r\nimport Container from \"./components/styles/Container.styled\";\r\n\r\nconst App = () =\u003e {\r\n    return (\r\n      \r\n            \u003cContainer\u003e\r\n                {data.map((item, index) =\u003e {\r\n                    return \u003cCard {...item} key={index} /\u003e;\r\n                })}\r\n            \u003c/Container\u003e\r\n\r\n    );\r\n};\r\n\r\nexport default App;\r\n\r\n\r\n\r\n```\r\n- styled-components props \u0026 extend \u0026 css\r\n\r\n```jsx\r\n1.asama\r\n//Button.styled.jsx\r\n\r\n//! escb ile buttondan component olusturma kisayolu\r\n\r\n\r\nimport styled, { css } from \"styled-components\";\r\n\r\nconst Button = styled.button`\r\n    background-color: ${({ bg }) =\u003e bg || \"#fff\"};\r\n    color: ${({ color }) =\u003e color || \"#fff\"};\r\n    border: 1px solid #a62440;\r\n    border-radius: 5px;\r\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);\r\n    padding: 1rem 1.2rem;\r\n    font-size: 1.1rem;\r\n    margin-right: 0.5rem;\r\n    margin: 2rem 0.5rem;\r\n    cursor: pointer;\r\n    \u0026:hover {\r\n        opacity: 0.9;\r\n        transform: scale(0.98);\r\n    }\r\n\r\n    /* !bg property e sahip olana css yardimiyla birden fazla özellikte verebiliriz */\r\n    \r\n    /* ${({ bg }) =\u003e\r\n        bg \u0026\u0026\r\n        css`\r\n            background-color: #a62440;\r\n            color: #fff;\r\n            border: 1px solid #a62440;\r\n            border-radius: 5px;\r\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);\r\n            padding: 1rem 1.2rem;\r\n            font-size: 1.1rem;\r\n            margin-right: 0.5rem;\r\n            margin: 2rem 0.5rem;\r\n            cursor: pointer;\r\n            \u0026:hover {\r\n                opacity: 0.9;\r\n                transform: scale(0.98);\r\n            }\r\n        `} */\r\n`;\r\n\r\nexport default Button;\r\n\r\n\r\n//! extends yukardaki button'un tüm özelliklerini alip istediklerimi degistirebiliyor yada ek özellik ekleyebiliyorum\r\n// export const DarkButton = styled(Button)`\r\n//     background-color: white;\r\n//     color: red;\r\n//     border: 2px solid red;\r\n// `;\r\n\r\n2.asama\r\n//Header.jsx\r\nimport Button from \"./styles/Button.styled\";\r\nimport Container from \"./styles/Container.styled\";\r\nimport Flex from \"./styles/Flex.styled\";\r\nimport StyledHeader, { Image, Logo, Nav } from \"./styles/Header.styled\";\r\n\r\nconst Header = () =\u003e {\r\n    return (\r\n        \u003cStyledHeader\u003e\r\n            \u003cContainer\u003e\r\n                \u003cNav\u003e\r\n                    \u003cLogo src=\"./images/logo.png\"\u003e\u003c/Logo\u003e\r\n                    \u003cdiv\u003e\r\n                        \u003cButton color=\"#A62440\"\u003eApply Courses\u003c/Button\u003e\r\n                        \u003cButton primary bg=\"#A62440\"\u003eTalk to Adviser\u003c/Button\u003e\r\n                    \u003c/div\u003e\r\n                \u003c/Nav\u003e\r\n\r\n                \u003cFlex\u003e\r\n                    \u003cdiv\u003e\r\n                        \u003ch1\u003eThe IT Career of Your Dreams Starts Here!\u003c/h1\u003e\r\n                        \u003cp\u003e\r\n                            Clarusway is a leading international software\r\n                            Bootcamp. Join a micro class online with other\r\n                            trainees and learn coding skills with a\r\n                            highly-skilled instructor.\r\n                        \u003c/p\u003e\r\n                        \u003cButton bg=\"#A62440\"\u003eStart Your New Carier\u003c/Button\u003e\r\n                    \u003c/div\u003e\r\n                    \u003cImage src=\"./images/hero.jpg\"\u003e\u003c/Image\u003e\r\n                \u003c/Flex\u003e\r\n            \u003c/Container\u003e\r\n        \u003c/StyledHeader\u003e\r\n    );\r\n};\r\n\r\nexport default Header;\r\n\r\n\r\n\r\n\r\n```\r\n\r\n\r\n-   Semantic Commit Messages\r\n    See how a minor change to your commit message style can make you a better programmer.\r\n\r\n    Format: \u003ctype\u003e(\u003cscope\u003e): \u003csubject\u003e\r\n\r\n    \u003cscope\u003e is optional\r\n\r\n    -   Example\r\n\r\n    ```\r\n                feat: add hat wobble\r\n        ^--^  ^------------^\r\n        |     |\r\n        |     +-\u003e Summary in present tense.\r\n        |\r\n        +-------\u003e Type: chore, docs, feat, fix, refactor, style, or test.\r\n    ```\r\n\r\n-   More Examples:\r\n    -   `feat`: (new feature for the user, not a new feature for build script)\r\n    -   `fix`: (bug fix for the user, not a fix to a build script)\r\n    -   `docs`: (changes to the documentation)\r\n    -   `style`: (formatting, missing semi colons, etc; no production code change)\r\n    -   `refactor`: (refactoring production code, eg. renaming a variable)\r\n    -   `test`: (adding missing tests, refactoring tests; no production code change)\r\n    -   `chore`: (updating grunt tasks etc; no production code change)\r\n\r\n---\r\n\r\n## Feedback and Collaboration\r\n\r\nI value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out.\r\nI'm always open to collaboration and welcome the opportunity to work on exciting projects together.\r\nThank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!\r\n\r\n\u003cp align=\"center\"\u003e ⌛\u003cstrong\u003e Happy Coding \u003c/strong\u003e ✍ \u003c/p\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Freact-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaplanh%2Freact-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Freact-styled-components/lists"}