{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Min components for React. Getting Started If you don't have a React project yet, you can use create-react-app to get started, follow the instructions here to get started with create-react-app. Adding Min Since this package includes the latest version of Min already, you don't need to install it separately. npm yarn pnpm npm install min-react yarn add min-react pnpm add min-react Using Min Import the Min components you want to use in your src/App.js file or your custom component file: import { Button } from 'min-react' ;","title":"Getting Started"},{"location":"#_1","text":"Min components for React.","title":""},{"location":"#getting-started","text":"If you don't have a React project yet, you can use create-react-app to get started, follow the instructions here to get started with create-react-app.","title":"Getting Started"},{"location":"#adding-min","text":"Since this package includes the latest version of Min already, you don't need to install it separately. npm yarn pnpm npm install min-react yarn add min-react pnpm add min-react","title":"Adding Min"},{"location":"#using-min","text":"Import the Min components you want to use in your src/App.js file or your custom component file: import { Button } from 'min-react' ;","title":"Using Min"},{"location":"components/buttons/","text":"Custom buttons with multiple variants and a smaller version Big buttons Code Result < Button variant = \"btn-a\" > btn-a </ Button > < Button variant = \"btn-b\" > btn-b </ Button > < Button variant = \"btn-c\" > btn-c </ Button > < Button > classless </ Button > Small buttons Code Result < Button variant = \"btn-a\" small > btn-a </ Button > < Button variant = \"btn-b\" small > btn-b </ Button > < Button variant = \"btn-c\" small > btn-c </ Button > < Button small > classless </ Button >","title":"Buttons"},{"location":"components/buttons/#big-buttons","text":"Code Result < Button variant = \"btn-a\" > btn-a </ Button > < Button variant = \"btn-b\" > btn-b </ Button > < Button variant = \"btn-c\" > btn-c </ Button > < Button > classless </ Button >","title":"Big buttons"},{"location":"components/buttons/#small-buttons","text":"Code Result < Button variant = \"btn-a\" small > btn-a </ Button > < Button variant = \"btn-b\" small > btn-b </ Button > < Button variant = \"btn-c\" small > btn-c </ Button > < Button small > classless </ Button >","title":"Small buttons"},{"location":"components/forms/","text":"Custom forms with multiple customizable components Code Result < Form > < Form.Input type = \"text\" /> < br /> < br /> < Form.TextArea /> < br /> < br /> < Form.Addon > $ </ Form.Addon >< Form.Input type = \"text\" /> </ Form > Info The Input , TextArea and Addon components are all optional. You can use any combination of them to create your own custom form. Info The Input , TextArea and Addon components can be styled like you would style any other input/textarea component. For example, you can add a placeholder attribute to the Input component. Warning The Addon and Input component need to be placed next to each other on the same line otherwise there will be a gap between them.","title":"Forms"},{"location":"components/grids/","text":"Easily make grids without needing to worry about any CSS Code Result < Grid > < Grid.Column size = {12} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 12 </ Grid.Column > < Grid.Column size = {11} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 11 </ Grid.Column > < Grid.Column size = {1} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 1 </ Grid.Column > < Grid.Column size = {10} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 10 </ Grid.Column > < Grid.Column size = {2} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 2 </ Grid.Column > < Grid.Column size = {9} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 9 </ Grid.Column > < Grid.Column size = {3} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 3 </ Grid.Column > < Grid.Column size = {8} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 8 </ Grid.Column > < Grid.Column size = {4} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 4 </ Grid.Column > < Grid.Column size = {7} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 7 </ Grid.Column > < Grid.Column size = {5} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 5 </ Grid.Column > < Grid.Column size = {6} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 6 </ Grid.Column > < Grid.Column size = {6} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 1 </ Grid.Column > < Grid.Column size = {5} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 5 </ Grid.Column > < Grid.Column size = {7} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 2 </ Grid.Column > < Grid.Column size = {4} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 4 </ Grid.Column > < Grid.Column size = {8} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 3 </ Grid.Column > < Grid.Column size = {3} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 3 </ Grid.Column > < Grid.Column size = {9} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 4 </ Grid.Column > < Grid.Column size = {2} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 2 </ Grid.Column > < Grid.Column size = {10} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 5 </ Grid.Column > < Grid.Column size = {1} style = {{ backgroundColor: '# acacac ', height: ' 32px ', marginBottom: ' 13px ' }} > 1 </ Grid.Column > < Grid.Column size = {11} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 6 </ Grid.Column > < Grid.Column size = {12} style = {{ backgroundColor: '# dfdfdf ', height: ' 32px ', marginBottom: ' 13px ' }} > 12 </ Grid.Column > </ Grid > Warning The added styles are only for demonstration purposes. They are not required nor a part of the component.","title":"Grids"},{"location":"components/icons/","text":"Easily display icons by specifying a unicode character Code Result < Icon > \u260e </ Icon > Info For more information on which icons are available I refer to the official Min documentation .","title":"Icons"},{"location":"components/messages/","text":"Easily display customizable messages Code Result < Message > < strong > Watch out! </ strong > You have come to the last component. There are reports that the last component is the most dangerous. </ Message >","title":"Messages"},{"location":"components/navbars/","text":"Custom forms with customizable and responsive components Code Result < Navbar > < Navbar.Name href = \"/\" > min-react </ Navbar.Name > < a href = \"#\" > One </ a > < a href = \"#\" > Two </ a > < a href = \"#\" > Three </ a > </ Navbar > < Navbar.CloseButton > \u00d7 </ Navbar.CloseButton > Info The CloseButton component is a special component that is only used in the mobile version of the navbar. It is optional and not required to use.","title":"Navbars"},{"location":"components/tables/","text":"Beautifull and customizable tables Code Result < Table > < thead > < tr > < th > # </ th > < th > Widgets Sold </ th > </ tr > </ thead > < tbody > < tr > < td > 1 </ td > < td > 5 </ td > </ tr > < tr > < td > 2 </ td > < td > 10 </ td > </ tr > < tr > < td > 3 </ td > < td > 500 </ td > </ tr > </ tbody > </ Table > Info There are no special components for the table's content. More information about the table content can be found here .","title":"Tables"},{"location":"practical/contributing/","text":"Contributing to react-min We would love for you to contribute to react-min and help make it even better than it is today! As a contributor, here are the guidelines we would like you to follow: Issues and Bugs Feature Requests Submission Guidelines Submission Guidelines Commit Message Guidelines Found a Bug? If you find a bug in the source code, you can help us by submitting an issue to our GitHub Repository . Even better, you can submit a Pull Request with a fix. Missing a Feature? You can request a new feature by submitting an issue to our GitHub Repository. If you would like to implement a new feature, please consider the size of the change in order to determine the right steps to proceed: For a Major Feature , first open an issue and outline your proposal so that it can be discussed. This process allows us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project. Note : Adding a new topic to the documentation, or significantly re-writing a topic, counts as a major feature. Small Features can be crafted and directly submitted as a Pull Request . Submission Guidelines Submitting an Issue Before you submit an issue, please search the issue tracker. An issue for your problem might already exist and the discussion might inform you of workarounds readily available. We want to fix all the issues as soon as possible, but before fixing a bug, we need to reproduce and confirm it. In order to reproduce bugs, we require that you provide a minimal reproduction. Having a minimal reproducible scenario gives us a wealth of important information without going back and forth to you with additional questions. A minimal reproduction allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem. We require a minimal reproduction to save maintainers' time and ultimately be able to fix more bugs. Often, developers find coding problems themselves while preparing a minimal reproduction. We understand that sometimes it might be hard to extract essential bits of code from a larger codebase, but we really need to isolate the problem before we can fix it. Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you, we are going to close an issue that doesn't have enough info to be reproduced. You can file new issues by selecting from our new issue templates and filling out the issue template. Submitting a Pull Request (PR) Before you submit your Pull Request (PR) consider the following guidelines: Search GitHub for an open or closed PR that relates to your submission. You don't want to duplicate existing efforts. Be sure that an issue describes the problem you're fixing, or documents the design for the feature you'd like to add. Discussing the design upfront helps to ensure that we're ready to accept your work. Fork the Iliannnn/min-react repo. In your forked repository, make your changes in a new git branch: git checkout -b my-fix-branch main Create your patch, including appropriate test cases . Commit your changes using a descriptive commit message that follows our commit message conventions . Adherence to these conventions is necessary because release notes are automatically generated from these messages. git commit --all Note: the optional commit -a command line option will automatically \"add\" and \"rm\" edited files. Push your branch to GitHub: git push origin my-fix-branch In GitHub, send a pull request to react-min:main . Reviewing a Pull Request The min-react maintainers reserves the right not to accept pull requests because of any reason possible. Commit Message Format We have very precise rules over how our Git commit messages must be formatted. This format leads to easier to read commit history . Each commit message consists of a header , a body , and a footer . <header> <BLANK LINE> <body> <BLANK LINE> <footer> The header is mandatory and must conform to the Commit Message Header format. The body is mandatory for all commits except for those of type \"docs\". When the body is present it must be at least 20 characters long and must conform to the Commit Message Body format. The footer is optional. The Commit Message Footer format describes what the footer is used for and the structure it must have. Commit Message Header <type>(<scope>): <short summary> \u2502 \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2af8 Summary in present tense. Not capitalized. No period at the end. \u2502 \u2502 \u2502 \u2514\u2500\u2af8 Commit Scope: Features, components, ... that changed. In one word. Not capitalized. No period at the end. \u2502 \u2514\u2500\u2af8 Commit Type: build|ci|docs|feat|fix|perf|refactor|test The <type> and <summary> fields are mandatory, the (<scope>) field is optional. Type Must be one of the following: build : Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) ci : Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs) docs : Documentation only changes feat : A new feature fix : A bug fix perf : A code change that improves performance refactor : A code change that neither fixes a bug nor adds a feature test : Adding missing tests or correcting existing tests Summary Use the summary field to provide a succinct description of the change: use the imperative, present tense: \"change\" not \"changed\" nor \"changes\" don't capitalize the first letter no dot (.) at the end Commit Message Body Just as in the summary, use the imperative, present tense: \"fix\" not \"fixed\" nor \"fixes\". Explain the motivation for the change in the commit message body. This commit message should explain why you are making the change. You can include a comparison of the previous behavior with the new behavior in order to illustrate the impact of the change. Commit Message Footer The footer can contain information about breaking changes and deprecations and is also the place to reference GitHub issues, Jira tickets, and other PRs that this commit closes or is related to. For example: BREAKING CHANGE: <breaking change summary> <BLANK LINE> <breaking change description + migration instructions> <BLANK LINE> <BLANK LINE> Fixes #<issue number> or DEPRECATED: <what is deprecated> <BLANK LINE> <deprecation description + recommended update path> <BLANK LINE> <BLANK LINE> Closes #<pr number> Breaking Change section should start with the phrase \"BREAKING CHANGE: \" followed by a summary of the breaking change, a blank line, and a detailed description of the breaking change that also includes migration instructions. Similarly, a Deprecation section should start with \"DEPRECATED: \" followed by a short description of what is deprecated, a blank line, and a detailed description of the deprecation that also mentions the recommended update path.","title":"Contributing"},{"location":"practical/contributing/#contributing-to-react-min","text":"We would love for you to contribute to react-min and help make it even better than it is today! As a contributor, here are the guidelines we would like you to follow: Issues and Bugs Feature Requests Submission Guidelines Submission Guidelines Commit Message Guidelines","title":"Contributing to react-min"},{"location":"practical/contributing/#found-a-bug","text":"If you find a bug in the source code, you can help us by submitting an issue to our GitHub Repository . Even better, you can submit a Pull Request with a fix.","title":" Found a Bug?"},{"location":"practical/contributing/#missing-a-feature","text":"You can request a new feature by submitting an issue to our GitHub Repository. If you would like to implement a new feature, please consider the size of the change in order to determine the right steps to proceed: For a Major Feature , first open an issue and outline your proposal so that it can be discussed. This process allows us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project. Note : Adding a new topic to the documentation, or significantly re-writing a topic, counts as a major feature. Small Features can be crafted and directly submitted as a Pull Request .","title":" Missing a Feature?"},{"location":"practical/contributing/#submission-guidelines","text":"","title":" Submission Guidelines"},{"location":"practical/contributing/#submitting-an-issue","text":"Before you submit an issue, please search the issue tracker. An issue for your problem might already exist and the discussion might inform you of workarounds readily available. We want to fix all the issues as soon as possible, but before fixing a bug, we need to reproduce and confirm it. In order to reproduce bugs, we require that you provide a minimal reproduction. Having a minimal reproducible scenario gives us a wealth of important information without going back and forth to you with additional questions. A minimal reproduction allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem. We require a minimal reproduction to save maintainers' time and ultimately be able to fix more bugs. Often, developers find coding problems themselves while preparing a minimal reproduction. We understand that sometimes it might be hard to extract essential bits of code from a larger codebase, but we really need to isolate the problem before we can fix it. Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you, we are going to close an issue that doesn't have enough info to be reproduced. You can file new issues by selecting from our new issue templates and filling out the issue template.","title":" Submitting an Issue"},{"location":"practical/contributing/#submitting-a-pull-request-pr","text":"Before you submit your Pull Request (PR) consider the following guidelines: Search GitHub for an open or closed PR that relates to your submission. You don't want to duplicate existing efforts. Be sure that an issue describes the problem you're fixing, or documents the design for the feature you'd like to add. Discussing the design upfront helps to ensure that we're ready to accept your work. Fork the Iliannnn/min-react repo. In your forked repository, make your changes in a new git branch: git checkout -b my-fix-branch main Create your patch, including appropriate test cases . Commit your changes using a descriptive commit message that follows our commit message conventions . Adherence to these conventions is necessary because release notes are automatically generated from these messages. git commit --all Note: the optional commit -a command line option will automatically \"add\" and \"rm\" edited files. Push your branch to GitHub: git push origin my-fix-branch In GitHub, send a pull request to react-min:main .","title":" Submitting a Pull Request (PR)"},{"location":"practical/contributing/#reviewing-a-pull-request","text":"The min-react maintainers reserves the right not to accept pull requests because of any reason possible.","title":"Reviewing a Pull Request"},{"location":"practical/contributing/#commit-message-format","text":"We have very precise rules over how our Git commit messages must be formatted. This format leads to easier to read commit history . Each commit message consists of a header , a body , and a footer . <header> <BLANK LINE> <body> <BLANK LINE> <footer> The header is mandatory and must conform to the Commit Message Header format. The body is mandatory for all commits except for those of type \"docs\". When the body is present it must be at least 20 characters long and must conform to the Commit Message Body format. The footer is optional. The Commit Message Footer format describes what the footer is used for and the structure it must have.","title":" Commit Message Format"},{"location":"practical/contributing/#commit-message-header","text":"<type>(<scope>): <short summary> \u2502 \u2502 \u2502 \u2502 \u2502 \u2514\u2500\u2af8 Summary in present tense. Not capitalized. No period at the end. \u2502 \u2502 \u2502 \u2514\u2500\u2af8 Commit Scope: Features, components, ... that changed. In one word. Not capitalized. No period at the end. \u2502 \u2514\u2500\u2af8 Commit Type: build|ci|docs|feat|fix|perf|refactor|test The <type> and <summary> fields are mandatory, the (<scope>) field is optional.","title":"Commit Message Header"},{"location":"practical/contributing/#type","text":"Must be one of the following: build : Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) ci : Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs) docs : Documentation only changes feat : A new feature fix : A bug fix perf : A code change that improves performance refactor : A code change that neither fixes a bug nor adds a feature test : Adding missing tests or correcting existing tests","title":"Type"},{"location":"practical/contributing/#summary","text":"Use the summary field to provide a succinct description of the change: use the imperative, present tense: \"change\" not \"changed\" nor \"changes\" don't capitalize the first letter no dot (.) at the end","title":"Summary"},{"location":"practical/contributing/#commit-message-body","text":"Just as in the summary, use the imperative, present tense: \"fix\" not \"fixed\" nor \"fixes\". Explain the motivation for the change in the commit message body. This commit message should explain why you are making the change. You can include a comparison of the previous behavior with the new behavior in order to illustrate the impact of the change.","title":"Commit Message Body"},{"location":"practical/contributing/#commit-message-footer","text":"The footer can contain information about breaking changes and deprecations and is also the place to reference GitHub issues, Jira tickets, and other PRs that this commit closes or is related to. For example: BREAKING CHANGE: <breaking change summary> <BLANK LINE> <breaking change description + migration instructions> <BLANK LINE> <BLANK LINE> Fixes #<issue number> or DEPRECATED: <what is deprecated> <BLANK LINE> <deprecation description + recommended update path> <BLANK LINE> <BLANK LINE> Closes #<pr number> Breaking Change section should start with the phrase \"BREAKING CHANGE: \" followed by a summary of the breaking change, a blank line, and a detailed description of the breaking change that also includes migration instructions. Similarly, a Deprecation section should start with \"DEPRECATED: \" followed by a short description of what is deprecated, a blank line, and a detailed description of the deprecation that also mentions the recommended update path.","title":"Commit Message Footer"},{"location":"practical/customizing/","text":"Every component is highly customizable. Every component can be changed to the way you'd like, it can be invoked with different props, and it can be styled with your own CSS. Customizing props of a component For example, adding a placeholder to the Input component: Code Result < Form.Input placeholder = \"Enter your name\" /> Customizing CSS of a component For example, you can change the color of a button component in two ways: Using a CSS class: Component file CSS file Result < Button className = \"green\" > Click me </ Button > . green { background : #91D564 ; } Using JSX styling: Code Result < Button style = {{ backgroundColor: \"# 91D564 \" }} > Click me </ Button > As you can see, every prop or style you add to a component will be added to the component's element. For example, if you add a className prop to a Button component, it will be added to the button element. No matter what you add, it will be added to the component's element. This is how you can customize components.","title":"Customizing Components"},{"location":"practical/customizing/#customizing-props-of-a-component","text":"For example, adding a placeholder to the Input component: Code Result < Form.Input placeholder = \"Enter your name\" />","title":"Customizing props of a component"},{"location":"practical/customizing/#customizing-css-of-a-component","text":"For example, you can change the color of a button component in two ways: Using a CSS class: Component file CSS file Result < Button className = \"green\" > Click me </ Button > . green { background : #91D564 ; } Using JSX styling: Code Result < Button style = {{ backgroundColor: \"# 91D564 \" }} > Click me </ Button > As you can see, every prop or style you add to a component will be added to the component's element. For example, if you add a className prop to a Button component, it will be added to the button element. No matter what you add, it will be added to the component's element. This is how you can customize components.","title":"Customizing CSS of a component"}]}