forked from morfeojs/morfeo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
32 changed files
with
775 additions
and
239 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,152 @@ | ||
| --- | ||
| sidebar_position: 2 | ||
| sidebar_position: 4 | ||
| id: hooks | ||
| title: hooks 🚧 | ||
| title: hooks | ||
| description: morfeo's hooks package | ||
| --- | ||
|
|
||
| :::caution | ||
| 🚧 This section is still under construction | ||
| **@morfeo/hooks** expose a set of hooks to easily use morfeo inside a `react` context. | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| # npm | ||
| npm i @morfeo/hooks | ||
|
|
||
| # yarn | ||
| yarn add @morfeo/hooks | ||
| ``` | ||
|
|
||
| - [useTheme](#usetheme) | ||
| - [useThemeSlice](#usethemeslice) | ||
| - [useThemeValue](#usethemevalue) | ||
| - [useStyles](#usestyles) | ||
| - [useStyle](#usestyle) | ||
|
|
||
| Advanced | ||
|
|
||
| - [useProps](#useprops) | ||
| - [useSubscribe](#usesubscribe) | ||
|
|
||
| ## useTheme | ||
|
|
||
| Use this hook to get the current theme and use it inside a components: | ||
|
|
||
| ```jsx | ||
| const MyComponent: React.FC = () => { | ||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <div> | ||
| <p>My primary color is: {theme.colors.primary}</p> | ||
| <p>My xxl space is: {theme.spaces.xxl}</p> | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| :::note | ||
| If you already know the [core API](./core) useTheme is the equivalent of `theme.get()`, the main difference is that useTheme react | ||
| to theme changes and force a re-render of the component. | ||
| ::: | ||
|
|
||
| Most of the time you don't need all theme, but just a slice or single value, in this cases [useThemeSlice](#useThemeSlice) and [useThemeValue](#useThemeValue) can will give you only the part of the theme you want: | ||
|
|
||
| ### useThemeSlice | ||
|
|
||
| ```jsx | ||
| const MyComponent: React.FC = () => { | ||
| const colors = useThemeSlice('colors'); | ||
|
|
||
| return ( | ||
| <div> | ||
| <p>My primary color is: {colors.primary}</p> | ||
| <p>My secondary color is: {colors.secondary}</p> | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ### useThemeValue | ||
|
|
||
| ```jsx | ||
| const MyComponent: React.FC = () => { | ||
| const primaryColor = useThemeValue('colors', 'primary'); | ||
|
|
||
| return ( | ||
| <div> | ||
| <p>My primary color is: {primaryColor}</p> | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## useStyles | ||
|
|
||
| Most of the times you don't need the theme, but you need to generate a style based on the theme; The hooks `useStyles` and `useStyle` are made for this reason: | ||
|
|
||
| ```jsx | ||
| const MyComponent: React.FC = () => { | ||
| const { agreeStyle, disagreeStyle, textStyle } = useStyles({ | ||
| agreeStyle: { componentName: 'Button', variant: 'success' }, | ||
| disagreeStyle: { componentName: 'Button' }, | ||
| textStyle: { fontSize: 'xxl', color: 'white' }, | ||
| }); | ||
|
|
||
| return ( | ||
| <div> | ||
| <p style={textStyle}>Nothing is better than a fresh beer in summer 🍺</p> | ||
| <button style={agreeStyle}>Oh yes! 🍻</button> | ||
| <button style={disagreeStyle}>What about a Coke? 🥤</button> | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
| ## useStyle | ||
| Use it if you need to generate just one style: | ||
| ```jsx | ||
| const AgreeButton: React.FC = ({ children }) => { | ||
| const buttonStyle = useStyles({ | ||
| componentName: 'Button', | ||
| variant: 'success', | ||
| }); | ||
|
|
||
| return <button style={buttonStyle}>{children}</button>; | ||
| }; | ||
| ``` | ||
| :::note | ||
| Just like useTheme, **useStyles** and **useStyle** are the equivalent of the [core API's](./core) `parsers.resove(style)` | ||
| but they force a re-render when the theme changes. | ||
| ::: | ||
| ## useProps | ||
| Use it to get the default props of a components, a common use is to merge the defaut props with the current props: | ||
| ```jsx | ||
| function MyButton(props) { | ||
| const defaultProps = useProps('Button', 'primary'); | ||
|
|
||
| return <button {...defaultProps} {...props} />; | ||
| } | ||
| ``` | ||
| ## useSubscribe | ||
| If you just need to react to theme changes, `useSubscribe` receive a callback that will be executed every time the theme changes: | ||
| ```jsx | ||
| function ThemeChangesCounter() { | ||
| const [counter, setCounter] = useState(0); | ||
|
|
||
| useSubscribe(() => { | ||
| setCounter(prev => prev + 1); | ||
| }, []); | ||
|
|
||
| return <div>The theme is changed {counter} times</div>; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| --- | ||
| sidebar_position: 4 | ||
| sidebar_position: 5 | ||
| id: native | ||
| title: native 🚧 | ||
| description: morfeo's native package | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,18 @@ | ||
| --- | ||
| sidebar_position: 3 | ||
| id: react | ||
| title: react 🚧 | ||
| title: react | ||
| description: morfeo's react package | ||
| --- | ||
|
|
||
| :::caution | ||
| 🚧 This section is still under construction | ||
| ::: | ||
| ## Installation | ||
|
|
||
| ```bash | ||
| # npm | ||
| npm i @morfeo/react | ||
|
|
||
| # yarn | ||
| yarn add @morfeo/react | ||
| ``` | ||
|
|
||
| **@morfeo/react** re-expose [@morfeo/hooks](./hooks.mdx) and [@morfeo/web](./web.mdx), we suggest you to read their documentations. |
Oops, something went wrong.