https://github.com/alloc/react-primal
Extensible primitives for React Native
https://github.com/alloc/react-primal
react react-native typescript
Last synced: 9 months ago
JSON representation
Extensible primitives for React Native
- Host: GitHub
- URL: https://github.com/alloc/react-primal
- Owner: alloc
- Archived: true
- Created: 2019-12-01T00:21:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:38:25.000Z (over 2 years ago)
- Last Synced: 2025-03-24T21:02:30.996Z (11 months ago)
- Topics: react, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 380 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-primal
Extensible `` primitive with inline style props
**For React Native only**
## ``
By default, the `` component takes `` props (eg: `style={{height: 0}}`)
and `ViewStyle` props (eg: `height={0}`).
```tsx
props
pointerEvents="none"
style={{ width: 25 }}
// ViewStyle props
height={50}
backgroundColor="black"
/>
```
The `style` prop overrides any inline style props.
## `Box.extend`
Bind props to the `` component. Think of it like [currying](https://medium.com/@kbrainwave/currying-in-javascript-ce6da2d324fe) or sub-classing.
```tsx
const Row = Box.extend({
flexDirection: 'row',
})
{children}
```
When the first argument of `extend` is a function, you can transform the
props every time the returned component is used.
```tsx
const Circle = Box.extend(props => ({
// Default background color
backgroundColor: 'black',
// User-provided props
...props,
// Always ignore user-provided "borderRadius"
style: [props.style, { borderRadius: 9999 }],
}))
```
The `extend` function can be used on any masked component.
```tsx
const BlueCircle = Circle.extend({
backgroundColor: 'blue',
color: 'white'
})
Much wow
```
That's all folks!
## Prior art
- [suchipi/react-boxxy](https://github.com/suchipi/react-boxxy)
- [segmentio/ui-box](https://github.com/segmentio/ui-box)