@gluestack-style/react
v1.0.57
Published
A universal & performant styling library for React Native, Next.js & React
Downloads
64,529
Readme
Introduction
A library that allows you to use CSS in your React and React Native projects with a modern, powerful and flexible way. gluestack-style
allows you to write CSS using JavaScript, which enables you to take advantage of the power and expressiveness of both languages. With its simple and intuitive API, you can easily create dynamic styles, responsive design, and handle themes for your applications.
Documentation
You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/style/docs/getting-started/installation website.
Installation
To use @gluestack-style/react
, all you need to do is install the
@gluestack-style/react
package and its peer dependencies:
$ yarn add @gluestack-style/react react-native-web react-native-svg
# or
$ npm i @gluestack-style/react react-native-web react-native-svg
Usage
To use the @gluestack-style/react
in your project, follow these steps:
- Wrap your application with the
StyledProvider
provided by @gluestack-style/react.
import { StyledProvider } from '@gluestack-style/react';
// Do this at the root of your application
function App({ children }) {
return <StyledProvider>{children}</StyledProvider>;
}
- Now you can use
@gluestack-style/react
to style your components by using thestyled
function provided by the library. For example:
import React from 'react';
import { styled } from '@gluestack-style/react';
const StyledButton = styled(
Pressable,
{
bg: '$red500',
p: '$3',
},
{}
);
const StyledButtonText = styled(Text, {}, {});
export const App = () => {
return (
<StyledProvider>
<StyledButton>
<StyledButtonText>Button</StyledButtonText>
</StyledButton>
</StyledProvider>
);
};
More guides on how to get started are available here.