Skip to content

Commit

Permalink
Merge pull request #265 from GeekyAnts/fix/example7
Browse files Browse the repository at this point in the history 
fixed customizing-components examples
  • Loading branch information
@amars29
amars29 authored Mar 3, 2022
2 parents 5725c55 + 7e6b3fd commit 2669fc2
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 40 deletions.
38 changes: 18 additions & 20 deletions docs/3.0.x/customizing-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@ 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({
components: {
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",
};
},
},
Expand Down Expand Up @@ -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" },
},
},
},
Expand All @@ -106,32 +106,31 @@ export function Example() {
</NativeBaseProvider>
);
}

```

## Adding Variants

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",
};
},
},
Expand All @@ -152,7 +151,6 @@ export function Example() {
</NativeBaseProvider>
);
}

```

<br />
Expand Down
38 changes: 18 additions & 20 deletions docs/3.1.x/customizing-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,27 @@ 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({
components: {
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",
};
},
},
Expand Down Expand Up @@ -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" },
},
},
},
Expand All @@ -106,32 +106,31 @@ export function Example() {
</NativeBaseProvider>
);
}

```

## Adding Variants

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",
};
},
},
Expand All @@ -152,7 +151,6 @@ export function Example() {
</NativeBaseProvider>
);
}

```

<br />
Expand Down

1 comment on commit 2669fc2

@vercel
Copy link

@vercel vercel bot commented on 2669fc2 Mar 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

staging-docs – ./

staging-docs-git-staging-geekyants-team.vercel.app
staging-docs.nativebase.io
staging-docs-geekyants-team.vercel.app

Please sign in to comment.