From 7e6b3fd5d16c1df9929d656406ef611230f9f6d1 Mon Sep 17 00:00:00 2001 From: amars29 Date: Thu, 3 Mar 2022 14:52:54 +0530 Subject: [PATCH] fixed customizing-components examples --- docs/3.0.x/customizing-components.md | 38 +++++++++++++--------------- docs/3.1.x/customizing-components.md | 38 +++++++++++++--------------- 2 files changed, 36 insertions(+), 40 deletions(-) diff --git a/docs/3.0.x/customizing-components.md b/docs/3.0.x/customizing-components.md index 115390750..1d55525c2 100644 --- a/docs/3.0.x/customizing-components.md +++ b/docs/3.0.x/customizing-components.md @@ -12,8 +12,8 @@ Let's customise a Button component to include rounded borders and red colorSchem ## Basic ```tsx -import React from 'react'; -import { NativeBaseProvider, extendTheme } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, extendTheme } from "native-base"; export default function () { const theme = extendTheme({ @@ -21,18 +21,18 @@ export default function () { Button: { // Can simply pass default props to change default behaviour of components. baseStyle: { - rounded: 'md', + rounded: "md", }, defaultProps: { - colorScheme: 'red', + colorScheme: "red", }, }, Heading: { // Can pass also function, giving you access theming tools baseStyle: ({ colorMode }) => { return { - color: colorMode === 'dark' ? 'red.300' : 'blue.300', - fontWeight: 'normal', + color: colorMode === "dark" ? "red.300" : "blue.300", + fontWeight: "normal", }; }, }, @@ -78,22 +78,22 @@ When variant in defaultProps is `solid` the above button will use solid variant. You can specify the base style of the component and use it across project. ```jsx isLive=true -import React from 'react'; -import { Text, NativeBaseProvider, Center, extendTheme } from 'native-base'; +import React from "react"; +import { Text, NativeBaseProvider, Center, extendTheme } from "native-base"; export function Example() { const theme = extendTheme({ components: { Text: { baseStyle: { - color: 'emerald.400' + color: "emerald.400", }, - defaultProps: { size: 'lg' }, + defaultProps: { size: "lg" }, sizes: { - xl: { fontSize: '64px' }, - lg: { fontSize: '32px' }, - md: { fontSize: '16px' }, - sm: { fontSize: '12px' }, + xl: { fontSize: "64px" }, + lg: { fontSize: "32px" }, + md: { fontSize: "16px" }, + sm: { fontSize: "12px" }, }, }, }, @@ -106,7 +106,6 @@ export function Example() { ); } - ``` ## Adding Variants @@ -114,24 +113,24 @@ export function Example() { You can also add the variants to the components and use it across project. ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, Button, extendTheme, Center, VStack, -} from 'native-base'; +} from "native-base"; export function Example() { const theme = extendTheme({ components: { Button: { variants: { - rounded: ({ colorScheme }: any) => { + rounded: ({ colorScheme }) => { return { bg: `${colorScheme}.500`, - rounded: 'full', + rounded: "full", }; }, }, @@ -152,7 +151,6 @@ export function Example() { ); } - ```
diff --git a/docs/3.1.x/customizing-components.md b/docs/3.1.x/customizing-components.md index cec1aae33..4e89d269c 100644 --- a/docs/3.1.x/customizing-components.md +++ b/docs/3.1.x/customizing-components.md @@ -12,8 +12,8 @@ Let's customise a Button component to include rounded borders and red colorSchem ## Basic ```tsx -import React from 'react'; -import { NativeBaseProvider, extendTheme } from 'native-base'; +import React from "react"; +import { NativeBaseProvider, extendTheme } from "native-base"; export default function () { const theme = extendTheme({ @@ -21,18 +21,18 @@ export default function () { Button: { // Can simply pass default props to change default behaviour of components. baseStyle: { - rounded: 'md', + rounded: "md", }, defaultProps: { - colorScheme: 'red', + colorScheme: "red", }, }, Heading: { // Can pass also function, giving you access theming tools baseStyle: ({ colorMode }) => { return { - color: colorMode === 'dark' ? 'red.300' : 'blue.300', - fontWeight: 'normal', + color: colorMode === "dark" ? "red.300" : "blue.300", + fontWeight: "normal", }; }, }, @@ -78,22 +78,22 @@ When variant in defaultProps is `solid` the above button will use solid variant. You can specify the base style of the component and use it across project. ```jsx isLive=true -import React from 'react'; -import { Text, NativeBaseProvider, Center, extendTheme } from 'native-base'; +import React from "react"; +import { Text, NativeBaseProvider, Center, extendTheme } from "native-base"; export function Example() { const theme = extendTheme({ components: { Text: { baseStyle: { - color: 'emerald.400' + color: "emerald.400", }, - defaultProps: { size: 'lg' }, + defaultProps: { size: "lg" }, sizes: { - xl: { fontSize: '64px' }, - lg: { fontSize: '32px' }, - md: { fontSize: '16px' }, - sm: { fontSize: '12px' }, + xl: { fontSize: "64px" }, + lg: { fontSize: "32px" }, + md: { fontSize: "16px" }, + sm: { fontSize: "12px" }, }, }, }, @@ -106,7 +106,6 @@ export function Example() { ); } - ``` ## Adding Variants @@ -114,24 +113,24 @@ export function Example() { You can also add the variants to the components and use it across project. ```jsx isLive=true -import React from 'react'; +import React from "react"; import { NativeBaseProvider, Button, extendTheme, Center, VStack, -} from 'native-base'; +} from "native-base"; export function Example() { const theme = extendTheme({ components: { Button: { variants: { - rounded: ({ colorScheme }: any) => { + rounded: ({ colorScheme }) => { return { bg: `${colorScheme}.500`, - rounded: 'full', + rounded: "full", }; }, }, @@ -152,7 +151,6 @@ export function Example() { ); } - ```