Get Started
Requirements
Installation
You can use either npm
npm i react-toggle-component
or yarn
yarn add react-toggle-component
Not Found
\n}\n\nexport default NotFound\n"],"sourceRoot":""}
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/dist/theme/theme.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Default theme settings.
3 | *
4 | */
5 | declare const _default: {
6 | version: string;
7 | width: string;
8 | height: string;
9 | borderWidth: string;
10 | borderColor: string;
11 | leftBorderColor: string;
12 | rightBorderColor: string;
13 | leftBackgroundColor: string;
14 | rightBackgroundColor: string;
15 | backgroundColorDisabled: string;
16 | radius: string;
17 | radiusBackground: string;
18 | knobRadius: string;
19 | knobWidth: string;
20 | knobHeight: string;
21 | knobGap: string;
22 | knobColor: string;
23 | leftKnobColor: string;
24 | rightKnobColor: string;
25 | };
26 | export default _default;
27 |
--------------------------------------------------------------------------------
/src/theme/theme.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Default theme settings.
3 | *
4 | */
5 |
6 | //
7 | // Export theme
8 | //
9 | export default {
10 | version: "1.0.0",
11 | width: "48px",
12 | height: "24px",
13 |
14 | borderWidth: "2px",
15 | borderColor: "#aaa",
16 | leftBorderColor: "#aaa",
17 | rightBorderColor: "#3887b7",
18 |
19 | leftBackgroundColor : "#fff",
20 | rightBackgroundColor : "#fff",
21 | backgroundColorDisabled : "#eee",
22 |
23 | radius : "256px",
24 | radiusBackground : "256px",
25 | knobRadius : "100%",
26 |
27 | knobWidth : "16px",
28 | knobHeight : "16px",
29 | knobGap: "4px",
30 |
31 | knobColor: "#aaa",
32 | leftKnobColor: "#aaa",
33 | rightKnobColor: "#3887b7",
34 | };
--------------------------------------------------------------------------------
/docs/page-data/theming/page-data.json:
--------------------------------------------------------------------------------
1 | {"componentChunkName":"component---srcdocs-theming-mdx","path":"/theming","result":{"pageContext":{"isCreatedByStatefulCreatePages":false,"frontmatter":{"name":"Theming","route":"/theming"},"entry":{"id":"4160a068d593513824bb6ed65b846cd8","filepath":"srcdocs/theming.mdx","fullpath":"/Users/giovambattistafazioli/Lavori/Github/react-toggle/srcdocs/theming.mdx","route":"/theming","slug":"srcdocs-theming","name":"Theming","menu":"","headings":[{"slug":"theming","depth":1,"value":"Theming"},{"slug":"how-change-the-toggle-appearance","depth":2,"value":"How change the toggle appearance"},{"slug":"new-appearance-props","depth":2,"value":"New appearance props"},{"slug":"theme-provider","depth":2,"value":"Theme Provider"}]}}}}
--------------------------------------------------------------------------------
/dist/theme/index.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __importDefault = (this && this.__importDefault) || function (mod) {
3 | return (mod && mod.__esModule) ? mod : { "default": mod };
4 | };
5 | Object.defineProperty(exports, "__esModule", { value: true });
6 | /**
7 | * Default theme provider.
8 | *
9 | */
10 | var react_1 = __importDefault(require("react"));
11 | var styled_components_1 = require("styled-components");
12 | var theme_1 = __importDefault(require("./theme"));
13 | var ReactToggleThemeProvider = function (_a) {
14 | var children = _a.children, theme = _a.theme;
15 | return react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme || theme_1.default }, children);
16 | };
17 | exports.default = ReactToggleThemeProvider;
18 | //# sourceMappingURL=index.js.map
--------------------------------------------------------------------------------
/docs/page-data/upgrade/page-data.json:
--------------------------------------------------------------------------------
1 | {"componentChunkName":"component---srcdocs-upgrade-mdx","path":"/upgrade","result":{"pageContext":{"isCreatedByStatefulCreatePages":false,"frontmatter":{"name":"Upgrade Guide","route":"/upgrade"},"entry":{"id":"c3c3b9abcead5f82d3e0519037f99388","filepath":"srcdocs/upgrade.mdx","fullpath":"/Users/giovambattistafazioli/Lavori/Github/react-toggle/srcdocs/upgrade.mdx","route":"/upgrade","slug":"srcdocs-upgrade","name":"Upgrade Guide","menu":"","headings":[{"slug":"upgrade-guide","depth":1,"value":"Upgrade Guide"},{"slug":"upgrade-to-20-from-1x","depth":2,"value":"Upgrade to 2.0 from 1.x"},{"slug":"labels","depth":2,"value":"Labels"},{"slug":"events","depth":2,"value":"Events"},{"slug":"mode-prop","depth":2,"value":"Mode prop"},{"slug":"theme-prop","depth":2,"value":"Theme prop"}]}}}}
--------------------------------------------------------------------------------
/dist/theme/theme.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | /**
3 | * Default theme settings.
4 | *
5 | */
6 | Object.defineProperty(exports, "__esModule", { value: true });
7 | //
8 | // Export theme
9 | //
10 | exports.default = {
11 | version: "1.0.0",
12 | width: "48px",
13 | height: "24px",
14 | borderWidth: "2px",
15 | borderColor: "#aaa",
16 | leftBorderColor: "#aaa",
17 | rightBorderColor: "#3887b7",
18 | leftBackgroundColor: "#fff",
19 | rightBackgroundColor: "#fff",
20 | backgroundColorDisabled: "#eee",
21 | radius: "256px",
22 | radiusBackground: "256px",
23 | knobRadius: "100%",
24 | knobWidth: "16px",
25 | knobHeight: "16px",
26 | knobGap: "4px",
27 | knobColor: "#aaa",
28 | leftKnobColor: "#aaa",
29 | rightKnobColor: "#3887b7",
30 | };
31 | //# sourceMappingURL=theme.js.map
--------------------------------------------------------------------------------
/docs/page-data/components/toggle/page-data.json:
--------------------------------------------------------------------------------
1 | {"componentChunkName":"component---srcdocs-components-toggle-toggle-mdx","path":"/components/toggle","result":{"pageContext":{"isCreatedByStatefulCreatePages":false,"frontmatter":{"name":"Toggle","route":"/components/toggle","menu":"Components"},"entry":{"id":"b0015348a83502c35f3669a853afd697","filepath":"srcdocs/components/Toggle/toggle.mdx","fullpath":"/Users/giovambattistafazioli/Lavori/Github/react-toggle/srcdocs/components/Toggle/toggle.mdx","route":"/components/toggle","slug":"srcdocs-components-toggle-toggle","name":"Toggle","menu":"Components","headings":[{"slug":"toggle","depth":1,"value":"Toggle"},{"slug":"basic-usage","depth":2,"value":"Basic usage"},{"slug":"disable","depth":3,"value":"Disable"},{"slug":"appearance","depth":3,"value":"Appearance"},{"slug":"properties","depth":2,"value":"Properties"}]}}}}
--------------------------------------------------------------------------------
/config/webpack.config.base.ts:
--------------------------------------------------------------------------------
1 | import { resolve } from "path";
2 | import webpack from "webpack";
3 |
4 | const BaseConfig: webpack.Configuration = {
5 | devtool: "inline-source-map",
6 |
7 | entry: [resolve(__dirname, "..", "src", "index.tsx")],
8 |
9 | module: {
10 | rules: [
11 | {
12 | oneOf: [
13 | {
14 | test: /\.(ts|tsx)$/,
15 | use: [
16 | {
17 | loader: require.resolve("ts-loader"),
18 | options: {
19 | configFile: resolve(__dirname, "..", "tsconfig.json"),
20 | },
21 | },
22 | ],
23 | },
24 | ],
25 | },
26 | ],
27 | },
28 |
29 | resolve: {
30 | extensions: [".ts", ".tsx"],
31 | alias: {},
32 | },
33 | };
34 |
35 | export default BaseConfig;
36 |
--------------------------------------------------------------------------------
/docs/page-data/code-of-conduct/page-data.json:
--------------------------------------------------------------------------------
1 | {"componentChunkName":"component---code-of-conduct-md","path":"/code-of-conduct","result":{"pageContext":{"isCreatedByStatefulCreatePages":false,"frontmatter":{},"entry":{"id":"a1ee87dafebc22cbd96979f1b2b7e837","filepath":"CODE_OF_CONDUCT.md","fullpath":"/Users/giovambattistafazioli/Lavori/Github/react-toggle/CODE_OF_CONDUCT.md","route":"/code-of-conduct","slug":"code-of-conduct","name":"Code of conduct","menu":"","headings":[{"slug":"contributor-covenant-code-of-conduct","depth":1,"value":"Contributor Covenant Code of Conduct"},{"slug":"our-pledge","depth":2,"value":"Our Pledge"},{"slug":"our-standards","depth":2,"value":"Our Standards"},{"slug":"our-responsibilities","depth":2,"value":"Our Responsibilities"},{"slug":"scope","depth":2,"value":"Scope"},{"slug":"enforcement","depth":2,"value":"Enforcement"},{"slug":"attribution","depth":2,"value":"Attribution"}]}}}}
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Giovambattista Fazioli
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "plugins": [
4 | {
5 | "name": "typescript-styled-plugin"
6 | }
7 | ],
8 | "outDir": "dist",
9 | "module": "commonjs",
10 | "target": "es5",
11 | "lib": [
12 | "es5",
13 | "es6",
14 | "es7",
15 | "es2017",
16 | "dom"
17 | ],
18 | "sourceMap": true,
19 | "jsx": "react",
20 | "moduleResolution": "node",
21 | "rootDirs": [
22 | "src"
23 | ],
24 | "baseUrl": ".",
25 | "forceConsistentCasingInFileNames": true,
26 | "noImplicitReturns": true,
27 | "noImplicitThis": true,
28 | "noImplicitAny": true,
29 | "strictNullChecks": true,
30 | "suppressImplicitAnyIndexErrors": true,
31 | "noUnusedLocals": false,
32 | "resolveJsonModule": true,
33 | "esModuleInterop": true,
34 | "allowSyntheticDefaultImports": true,
35 | "experimentalDecorators": true,
36 | // if you want to build a lib, you need declarations to be true and allow js to be false
37 | "allowJs": false,
38 | "declaration": true,
39 | "skipLibCheck": true
40 | },
41 | "include": [
42 | "src/**/*"
43 | ],
44 | "exclude": [
45 | "node_modules",
46 | "build",
47 | "scripts",
48 | "config"
49 | ]
50 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 | .env.test
60 |
61 | # parcel-bundler cache (https://parceljs.org/)
62 | .cache
63 |
64 | # next.js build output
65 | .next
66 |
67 | # nuxt.js build output
68 | .nuxt
69 |
70 | # vuepress build output
71 | .vuepress/dist
72 |
73 | # Serverless directories
74 | .serverless/
75 |
76 | # FuseBox cache
77 | .fusebox/
78 |
79 | # DynamoDB Local files
80 | .dynamodb/
81 |
82 | storybook-static
83 | .docz
--------------------------------------------------------------------------------
/srcdocs/theme/theme.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import styled from "styled-components";
3 |
4 | export const DocsExample = styled.div`
5 | background-color: #fff;
6 | border: 1px solid #aaa;
7 | border-radius: 8px;
8 | margin: 16px auto;
9 |
10 | padding: 0 8px 8px;
11 |
12 | h1 {
13 | font-size: 20px;
14 | margin: 0 -8px;
15 | padding: 0 8px;
16 | border-radius: 7px 7px 0 0;
17 | background-color: #999;
18 | color: #fff;
19 | }
20 |
21 | button {
22 | padding: 8px 16px;
23 | border-radius: 3px;
24 | border: none;
25 | background-color: #80a5f4;
26 | color: #fff;
27 | margin: 0 8px;
28 | cursor: pointer;
29 | box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.69);
30 |
31 | &:active {
32 | background-color: #5e77bb;
33 | box-shadow: none;
34 | }
35 | }
36 |
37 | pre {
38 | font-size: 12px;
39 | display: block;
40 | background-color: #fff;
41 | color: #666;
42 | border-radius: 256px;
43 | padding: 3px 12px;
44 | margin: 16px 8px;
45 | box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
46 | }
47 | `;
48 |
49 | export function CodeSandbox(id?: string) {
50 | const styles = {
51 | width: "100%",
52 | height: "500px",
53 | border: "0",
54 | borderRadius: "4px",
55 | overflow: "hidden",
56 | };
57 |
58 | return (
59 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/srcdocs/components/Toggle/toggle.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Toggle
3 | route: /components/toggle
4 | menu: Components
5 | ---
6 |
7 | import { Playground, Props } from 'docz'
8 | import Toggle, {ToggleProps} from '../../../src/components/Toggle'
9 |
10 |
11 | # Toggle
12 |
13 | The Toggle component is an useful replacement to the standar input checkbox component.
14 | Anyway, remember that the toggle component is an extension of the input checkbox. So, you can use it inside a form as well.
15 | In fact, remember to use the props `name` when you're using multiple toggle component in your view.
16 |
17 | ## Basic usage
18 |
19 | You can wrap the Toggle component with `label`
20 |
21 |
15 | 
Not Found
Not Found
{`Get Started`}
\n{`Requirements`}
\n \n{`Installation`}
\n{`You can use either `}{`npm`}
\n{`npm i react-toggle-component\n`}{`or `}{`yarn`}
\n{`yarn add react-toggle-component\n`}{`Code Sandbox`}
\nChange the background
23 |Change the background when on
28 |Change the shape
35 |Change the width size
40 |Change the height size
45 |Change the knob size
50 |Change the border size
58 |Change the border size
68 |
116 |
122 | All toggle children will use the same theme
117 |{`Upgrade Guide`}
\n{`Upgrade to 2.0 from 1.x`}
\n{`This version is not fully compatible with the previous 1.x versions. Anyway, you may update your code easly`}
\n{`Labels`}
\n{`First of all, we've removed the props for the labels. You can upgrade your code by following`}
\n{`// previous v1.x\n{`Events`}
\n{`The previous `}
{`// previous v1.x\n console.log(e.target.checked)} />\n\n// from v2.x\n console.log(e.target.checked)} />\n`} {`The new `}
{`In addition, you may use the new `}
{`// from left to the right \"on\"\n console.log(e.target.name)} />\n\n// from right to the left \"off\"\n console.log(e.target.name)} />\n`} {`Mode prop`}
\n{`Also the prop `}
{`Theme prop`}
\n{`We have also removed the `}
{`Contributor Covenant Code of Conduct`}
\n{`Our Pledge`}
\n{`In the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.`}
\n{`Our Standards`}
\n{`Examples of behavior that contributes to creating a positive environment\ninclude:`}
\n- \n
- {`Using welcoming and inclusive language`} \n
- {`Being respectful of differing viewpoints and experiences`} \n
- {`Gracefully accepting constructive criticism`} \n
- {`Focusing on what is best for the community`} \n
- {`Showing empathy towards other community members`} \n
{`Examples of unacceptable behavior by participants include:`}
\n- \n
- {`The use of sexualized language or imagery and unwelcome sexual attention or\nadvances`} \n
- {`Trolling, insulting/derogatory comments, and personal or political attacks`} \n
- {`Public or private harassment`} \n
- {`Publishing others' private information, such as a physical or electronic\naddress, without explicit permission`} \n
- {`Other conduct which could reasonably be considered inappropriate in a\nprofessional setting`} \n
{`Our Responsibilities`}
\n{`Project maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.`}
\n{`Project maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.`}
\n{`Scope`}
\n{`This Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.`}
\n{`Enforcement`}
\n{`Instances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at giovambattista.fazioli@gmail.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.`}
\n{`Project maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.`}
\n{`Attribution`}
\n{`This Code of Conduct is adapted from the `}{`Contributor Covenant`}{`, version 1.4,\navailable at `}{`https://www.contributor-covenant.org/version/1/4/code-of-conduct.html`}
\n{`For answers to common questions about this code of conduct, see\n`}{`https://www.contributor-covenant.org/faq`}
\n\n{`Toggle`}
\n{`The Toggle component is an useful replacement to the standar input checkbox component.\nAnyway, remember that the toggle component is an extension of the input checkbox. So, you can use it inside a form as well.\nIn fact, remember to use the props `}
{`Basic usage`}
\n{`You can wrap the Toggle component with `}
{`Or set any `}
{`Disable`}
\n{`Appearance`}
\n{`Props`}
\n{`Toggle`}
\n{`The Toggle component is an useful replacement to the standar input checkbox component.\nAnyway, remember that the toggle component is an extension of the input checkbox. So, you can use it inside a form as well.\nIn fact, remember to use the props `}
{`Basic usage`}
\n{`You can wrap the Toggle component with `}
{`Or set any `}
{`Disable`}
\n{`Appearance`}
\n{`Properties`}
\nChange the background
\nChange the background when on
\nChange the shape
\nChange the width size
\nChange the height size
\nChange the knob size
\nChange the border size
\nChange the border size
\n\n
\nAll toggle children will use the same theme
\nChange the background
\nChange the background when on
\nChange the shape
\nChange the width size
\nChange the height size
\nChange the knob size
\nChange the border size
\nChange the border size
\n\n
\nAll toggle children will use the same theme
\n{`Theming`}
\n{`This new version allow to change the whole toggle appearance. Now you'll be able to change every single color and size, for each single toggle component of for the whole user interface.`}
\n{`How change the toggle appearance`}
\n{`You may change the toggle appearance in two way: by using the new props for each single instance of your toggle component, or by using a theme provider.`}
\n{`New appearance props`}
\n{`You may use the new props to change the appearance for a single instance of component`}
\nChange the background
\nChange the background when on
\n{`Now you can also change others appearance properties`}
\nChange the shape
\nChange the width size
\nChange the height size
\nChange the knob size
\n{`You can also change the size and the border`}
\nChange the border size
\n{`Of course, you can set the knob gap`}
\nChange the border size
\n{`Theme Provider`}
\n{`Instead of change every single props, you might use the `}
{`import {ReactToggleThemeProvider} from \"react-toggle-component\";\n`}{`The current default theme is the following`}
\n{`export default {\n version: \"1.0.0\",\n width: \"48px\",\n height: \"24px\",\n\n borderWidth: \"2px\",\n borderColor: \"#aaa\",\n leftBorderColor: \"#aaa\",\n rightBorderColor: \"#3887b7\",\n\n leftBackgroundColor : \"#fff\",\n rightBackgroundColor : \"#fff\",\n backgroundColorDisabled : \"#eee\",\n\n radius : \"256px\",\n radiusBackground : \"256px\",\n knobRadius : \"100%\",\n\n knobWidth : \"16px\",\n knobHeight : \"16px\",\n knobGap: \"4px\",\n\n knobColor: \"#aaa\",\n leftKnobColor: \"#aaa\",\n rightKnobColor: \"#3887b7\",\n};\n`}\\n
\\n'} __scope={{\n props,\n DefaultLayout,\n Playground,\n Props,\n Toggle,\n ReactToggleThemeProvider\n }} mdxType=\"Playground\">\n All toggle children will use the same theme
\\n\n
\n All toggle children will use the same theme
\n{`As you can see from the above example, you don't need to write your own custome theme with all properties, you may override one or more properties.`}
\n\n{`Theming`}
\n{`This new version allow to change the whole toggle appearance. Now you'll be able to change every single color and size, for each single toggle component of for the whole user interface.`}
\n{`How change the toggle appearance`}
\n{`You may change the toggle appearance in two way: by using the new props for each single instance of your toggle component, or by using a theme provider.`}
\n{`New appearance props`}
\n{`You may use the new props to change the appearance for a single instance of component`}
\nChange the background
\nChange the background when on
\n{`Now you can also change others appearance properties`}
\nChange the shape
\nChange the width size
\nChange the height size
\nChange the knob size
\n{`You can also change the size and the border`}
\nChange the border size
\n{`Of course, you can set the knob gap`}
\nChange the border size
\n{`Theme Provider`}
\n{`Instead of change every single props, you might use the `}
{`import {ReactToggleThemeProvider} from \"react-toggle-component\";\n`}{`The current default theme is the following`}
\n{`export default {\n version: \"1.0.0\",\n width: \"48px\",\n height: \"24px\",\n\n borderWidth: \"2px\",\n borderColor: \"#aaa\",\n leftBorderColor: \"#aaa\",\n rightBorderColor: \"#3887b7\",\n\n leftBackgroundColor : \"#fff\",\n rightBackgroundColor : \"#fff\",\n backgroundColorDisabled : \"#eee\",\n\n radius : \"256px\",\n radiusBackground : \"256px\",\n knobRadius : \"100%\",\n\n knobWidth : \"16px\",\n knobHeight : \"16px\",\n knobGap: \"4px\",\n\n knobColor: \"#aaa\",\n leftKnobColor: \"#aaa\",\n rightKnobColor: \"#3887b7\",\n};\n`}\\n
\\n'} __scope={{\n props,\n DefaultLayout,\n Playground,\n Props,\n Toggle,\n ReactToggleThemeProvider\n }} mdxType=\"Playground\">\n All toggle children will use the same theme
\\n\n
\n All toggle children will use the same theme
\n{`As you can see from the above example, you don't need to write your own custome theme with all properties, you may override one or more properties.`}
\n\n